AngularJS-Untermenü mit ng-show

Question

Ich habe eine Direktive gemacht, die Menü-Elemente enthält, einige der Menüpunkte haben Untermenüpunkte in ihnen. Die Direktive ist so gemacht, dass wenn Sie auf den Menüpunkt klicken, öffnet sich das Untermenü. Mein Problem ist, dass wenn ich auf ein Menü-Element klicke öffnet es sein Untermenü und wenn ich auf das andere Menü-Element klicke öffnet es auch und so habe ich zwei Untermenüs geöffnet.
Ich möchte, dass alle anderen Untermenüs geschlossen werden, wenn ich auf Menü-Element klicke und nur angeklickte Menü-Einträge öffne. Wie soll ich das machen?

Mein HTML-Code:

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

Und das ist meine Richtlinie Code:

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

    } 
} 
}); 

Also, was soll ich tun, anderen Untermenüs zu schließen, wenn der Menüpunkt klicken?

Answer 1

Da Sie diese menuItem in Ihrem Menü Richtlinie sind Einwickeln, können Sie es wissen lassen, welches Element zuletzt geklickt wurde sein Name im übergeordneten Bereich wie folgt auf eine Eigenschaft vorbei:

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

dann können Sie verwenden dieser Wert mit ng-Show, die anderen zu verstecken:

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

ich habe Ihre plunker mit diesen Änderungen aktualisiert. Hoffe das hilft.