指令中带有ng show的AngularJS子菜单

我已经为我的sidenav下达了指令。在我的sidenav中，我有一些元素，它们下面有子菜单项。目前我只能在sidenav中切换一个元素，但我还需要至少2-3个元素。我应该如何实施它

我的指令代码：

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;
         }

     }
 }
 });

menuItem.directive（“menuItem”，function（））{
返回{
限制：“E”，
模板：“”，
是的，
范围：{
哈希：“@”，
显示：“=”，
},
链接：功能（$scope）{
$scope.toggle=函数（e）{
$scope.show=！$scope.show；
}
}
}
});

我的html代码：

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

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

    Side Menu item
    <ul ng-show="someVar">
        <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>
</menu>

侧菜单项


第一个子菜单项


第一个子菜单项


侧菜单项


第二个子菜单项


第二个子菜单项


侧菜单项

---

我的目标是，我可以在sidenav中使用ng show单独打开子菜单，有什么办法吗？

如果您有一个固定的菜单项列表，您可以为每个菜单项使用单独的变量，如下所示

<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>
</menu>

---

在本例中，您为每个数组项使用

show

字段。

当我单击两个菜单链接时，它会打开两个子菜单，谁应该实现一次只打开一个子菜单，这样当您单击另一个菜单项时，它会关闭所有其他子菜单？您确定已更改第二个菜单项的

show

值吗？第一个使用

menu1

，第二个使用

menu2

。请看第一个代码示例抱歉，我的问题措辞有点错误，此解决方案非常有效。我的意思是，如何实现这样一种情况，假设我按下menu1，它会显示，然后我按下menu2，它会显示，但我希望menu1在按下menu2时关闭，等等。

<menu visible="leftVisible" alignment="left">
    <menu-item ng-repeat="item in items" hash="{{item.hash}}" show="item.show">
        {{item.title}}
        <ul ng-show="item.show">
            <li ng-repeat="subItem in item.items">
                <a>{{subItem.title}}</a>
            </li>
        </ul>
    </menu-item>
</menu>