AngularJS 带有 ng-show 的子菜单

Question

我制作了一个包含菜单项的指令，其中一些菜单项包含子菜单项。指令是这样的，当你点击菜单项时，它会打开它的子菜单。我的问题是，当我单击一个菜单项时，它会打开它的子菜单，而当我单击另一个菜单项时，它也会打开它，所以我打开了两个子菜单。
当我单击菜单项并仅打开单击的菜单项子菜单时，我希望它关闭所有其他子菜单。我应该怎么做？

我的html代码：

<menu visible="leftVisible" alignment="left">
<menu-item hash="first" show="menu1">

    Side Menu item
    <ul ng-show="menu1">
        <li>
            <a>First submenu item</a>
        </li>
        <li>
            <a>First submenu item</a>
        </li>
    </ul>
</menu-item>
<menu-item hash="second" show="menu2">

    Side Menu item
    <ul ng-show="menu2">
        <li>
            <a >Second submenu item</a>
        </li>
        <li>
            <a >Second submenu item</a>
        </li>
    </ul>
</menu-item>
<menu-item hash="third">Side Menu item</menu-item>

这是我的指令代码：

menuItem.directive("menuItem", function() {
     return {
     restrict: "E",
     template: "<div ng-click='toggle($event)' ng-transclude></div>",
     transclude: true,
     scope: {
           hash: "@",
           show: '=',
     },
     link: function($scope) {
         $scope.toggle = function(e) {
               $scope.show = !$scope.show;
         }

     }
 }
});

那么点击菜单项时如何关闭其他子菜单呢？

Answer 1

由于您将这些 menuItem 包装在菜单指令中，您可以让它知道最后单击了哪个项目，将其名称传递给父范围中的属性，如下所示：

app.directive('menu', function() {
return {
    restrict: "E",
    template: "<div ng-class='{ show: visible, left: alignment === \"left\", right: alignment === \"right\" }' ng-transclude></div>",
    transclude: true,
    scope: {
        visible: "=",
        alignment: "@"
    }
};
});

app.directive("menuItem", function() {
 return {
     restrict: "E",
     template: "<div ng-click='toggle()' ng-transclude></div>",
     transclude: true,
     scope: {
         hash: "@"
     },
     link: function($scope, elm) {
         $scope.toggle = function(e) {
            $scope.$parent.activeItem = $scope.hash;
        }
     }
 }
});

然后您可以将该值与 ng-show 一起使用来隐藏其他值：

<menu visible="leftVisible" alignment="left">
<menu-item hash="first">

  Side Menu item
  <ul ng-show="activeItem === 'first'">
    <li>
      <a>First submenu item</a>
    </li>
    <li>
      <a>First submenu item</a>
    </li>
  </ul>
</menu-item>
<menu-item hash="second">

  Side Menu item (If I click this I would like all the other submenus to close, this case should cover all the Side Menu items)
  <ul ng-show="activeItem === 'second'">
    <li>
      <a>Second submenu item</a>
    </li>
    <li>
      <a>Second submenu item</a>
    </li>
  </ul>
</menu-item>
<menu-item hash="third">Side Menu item</menu-item>

我已经用这些更改更新了您的 plunker。希望这有帮助。

AngularJS 带有 ng-show 的子菜单

AngularJS submenu with ng-show

angularjs

angularjs-directive

ng-show