У меня есть директива меню, которая показывает небольшое раскрывающееся меню. Я немного потерял одну вещь, и что, чтобы убедиться, что только одно меню открыто одновременно. Я хотел бы запустить функцию am.close
для всех меню, а затем запустить am.toggle
для меню, которое я нажал.
Как я могу это сделать?
Директива:
core.directive('amMenu', [function() {
return {
restrict: 'E',
scope: {
wrapper: '@',
host: '=',
options: '@'
},
templateUrl: './assets/angular/modules/core/directives/actions-menu/am-menu.html',
controller: 'AmMenuCtrl',
controllerAs: 'am',
link: function(scope, element, attrs) {}
};
}]);
контроллер:
core.controller('AmMenuCtrl', [function() {
var am = this;
/--- some option arrays here ---/
am.toggle = function() {
am.isToggled = !am.isToggled;
};
am.close = function() {
am.isToggled = false;
};
}]);
Шаблон:
<div class="am-menu-wrapper" click-outside on-outside="am.close" exceptions="['am-menu-wrapper']">
<span class="am-toggle am-icon" ng-click="am.toggle()">
<i class="icon icon-dots-horizontal"></i>
</span>
<ul class="am-menu" ng-class="{visible: am.isToggled}">
<li class="am-item">
<span class="pull-rights" ng-click="am.close()"><i class="icon icon-dots-horizontal"></i></span>
</li>
<li class="am-item" ng-repeat="option in am[options].options" ng-bind="option.label" ng-click="option.onClick(host, wrapper)"></li>
</ul>
</div>
Мне приходят в голову два решения:
Я думаю, вы можете использовать сервис для хранения всех ссылок директив, когда один из них am.close
, вызовите am.close
на каждом из них и вызовите am.toggle
только на am.toggle
.
Вместо использования вложенной переменной isToggled
для управления статусом раскрывающегося списка вы можете использовать "document.querySelectorAll(" [am-menu] "); получить все директивы и добавить/удалить класс css для управления открытием/закрытием статуса