ng-show가있는 AngularJS 하위 메뉴

Question

메뉴 항목이있는 지시문을 만들었습니다. 일부 메뉴 항목에는 하위 메뉴 항목이 있습니다. 메뉴 항목을 클릭하면 하위 메뉴가 열리도록 지시문이 만들어집니다. 내 문제는 하나의 메뉴 항목을 클릭하면 하위 메뉴가 열리고 다른 메뉴 항목을 클릭하면 열리 며 하위 메뉴가 두 개 열려 있다는 것입니다.
메뉴 항목을 클릭하고 클릭 한 메뉴 항목 하위 메뉴를 열 때 다른 모든 하위 메뉴를 닫으려고합니다. 어떻게해야합니까?

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

    } 
} 
}); 

그래서 메뉴 항목을 클릭 할 때 내가 다른 하위 메뉴를 닫으려면 무엇을해야하는지?

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

것은 다음 사용할 수 있습니다 : 당신이 당신의 메뉴 지시어 내부의 사람들이 menuItem을 포장하고 있기 때문에

Answer 1

, 당신은이 같은 부모 범위에 속성에 이름을 통과 마지막으로 클릭 한 항목에 알릴 수 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에 이러한 변경 사항을 업데이트했습니다. 희망이 도움이됩니다.