Question

我已经为我的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;
         }

     }
 }
 });

我的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单独打开子菜单，任何想法如何做？

Answer 1

如果您有固定的菜单项列表，则可以为每个菜单项使用单独的变量，例如

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

在这种情况下，变量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>

在这种情况下，您为每个数组项使用show字段。

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

1 个答案: