AngularJSサブメニューとng-show

Question

メニュー項目があるディレクティブを作成しました。メニュー項目の中にはサブメニュー項目があります。ディレクティブは、メニュー項目をクリックするとそのサブメニューを開くように作られています。私の問題は、あるメニュー項目をクリックするとサブメニューが開き、他のメニュー項目をクリックするとそれも開くので、2つのサブメニューが開きます。
メニュー項目をクリックしたときに他のすべてのサブメニューを閉じ、クリックしたメニュー項目サブメニューのみを開くようにしたい。私はどうすればいいのですか？

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

、あなたはそれがこのような親スコープ内のプロパティにその名を渡し、最後のクリックされたアイテムを知らせることができます。

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でこれらの変更を更新しました。お役に立てれば。