ng-clickがネストされたng-clickで2回トリガーされました

Question

ng-clickを、別のリストのサブリストであるリストの中にng-clickイベントを使用して使用しようとすると問題が発生します。以下は私のコードである

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

私が持っている問題は、私はそれが自動的にupdateNavをトリガーupdateSubNavをクリックしたとき。私はこれらの2つの方法は、独立して仕事をしたいので、私は（updateSubNavをクリックすると、どのように私はupdateNavをトリガー防ぐことができます

Answer 1

防止イベント伝播

ビュー：？。

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

コントローラ：

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

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

Answer 2

これは、あなたはそれを上向きに起こることを防ぐために、内部divのクリックイベントのstopPropagationする必要があります。

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

あなたはすでに彼の答えに示す@TusharようにそこからupdateSubNav方法イベントの& stopPropagationに$eventオブジェクトを渡すことによって、同じことを行うことができます。

Answer 3

これは、答えはここにあり

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