ng-click ausgelöst zweimal mit einem verschachtelten NG-Klick

Question

Ich habe ein Problem, wenn Sie versuchen, die ng-click innerhalb einer Liste, die eine Unterliste einer anderen Liste ist, die ein ng-click Ereignis hat. mein Code ist folgende

<ul> 
    <li 
    ng-repeat="facet in node.Facets" 
    ng-click="updateNav(facet.Action)" 
    ng-cloak 
    > 
    {{facet.DisplayValue}} 
    <ul> 
     <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets" 
     ng-click="updateSubNav(sub.Action)" 
     > 
     {{sub.DisplayValue}} 
     </li> 
    </ul> 
    </li> 
</ul> 

Das Problem, das ich habe, ist, wenn ich updateSubNav klicken sie updateNav automatisch auslöst. Wie kann ich verhindern Auslösung updateNav Wenn ich updateSubNav klicken (weil ich diese zwei Methoden will, selbständig arbeiten

Answer 1

Verhindern, dass die Ereignispropagierung

ansehen:.

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets" 
    ng-click="updateSubNav($event, sub.Action)"> 
          ^^^^^^  === Pass event object 

Controller:

$scope.updateSubNav = function($event, action) { 
    // Code here 

    // Stop propagation 
    $event.stopPropagation(); 
} 

Answer 2

Dies ist, wie vor nt sprudeln funktioniert, müssen Sie stopPropagation des inneren div click event um zu verhindern, dass es nach oben passiert.

ng-click="updateSubNav(sub.Action); $event.stopPropagation()" 

Sie könnten, indem $event Objekt updateSubNav Methode & stopPropagation Veranstaltungs das gleiche tun von dort wie @Tushar bereits in seiner Antwort gezeigt.

Answer 3

Dies zu Ereignis zurückzuführen ist

<ul> 
      <li 
      ng-repeat="facet in node.Facets" 
      ng-click="updateNav(facet.Action)" 
      ng-cloak 
      > 
      {{facet.DisplayValue}} 
      <ul> 
       <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets" 
       ng-click="updateSubNav(sub.Action, $event)" 
       > 
       {{sub.DisplayValue}} 
       </li> 
      </ul> 
      </li> 
     </ul> 


     $scope.updateSubNav = function(action,$event){ 
     $event.stopPropagation(); 
     }