Question

我有一个菜单指令，显示一个小的下拉菜单。我在一件事上有点失落，而且这是如何确保一次只打开一个菜单。我想为所有菜单运行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>

Answer 1

我想到了两个解决方案：

我认为你可以使用服务来存储所有指令的引用，当点击其中一个时，在每个指针上调用am.close并在点击的一个上调用am.toggle
您可以使用'document.querySelectorAll（'[am-menu]'）;'而不是使用嵌套变量isToggled来控制下拉列表的状态。获取所有指令，并添加/删除css类以控制打开/关闭状态

如何在为特定指令运行函数之前运行影响所有相同类型指令的函数？

1 个答案: