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> 

我的目標是，我可以單獨與NG-展現在sidenav打開子菜單，任何想法怎麼辦呢？

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字段。