ng-show的AngularJS子菜單

我已經制作了一個菜單項的指令，其中一些菜單項有子菜單項。指令是這樣做的，當你點擊菜單項時，它會打開它的子菜單。我的問題是，當我點擊一個菜單項時會打開它的子菜單，當我點擊另一個菜單項時它會打開它，所以我打開了兩個子菜單。
我想要它關閉所有其他子菜單，當我點擊菜單項，並打開只點擊菜單項子菜單。我應該怎麼做？ng-show的AngularJS子菜單

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

    } 
} 
});

所以，我應該怎麼做才能關閉其他子菜單中的菜單項時，點擊？

來源

2017-05-11 Oskar Martin

它看起來像你的菜單指令？一個沉重的人會很高興能夠向你建議一個有效的想法。 – elvin

@elvin製作了一個運動員 - > https://plnkr.co/edit/lBWXqDMwFdNlHV59eM8e?p=preview –

既然你包裝一下你的菜單指令中的菜單項，就可以讓它知道哪些項目被點擊最後通過其名稱的屬性在這樣的父範圍：

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-表明值隱藏其他：

<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這些變化。希望這可以幫助。

來源

2017-05-11 20:46:16 elvin

這解決了我的問題，謝謝！ –

ng-show的AngularJS子菜單

回答

相關問題