在嵌套的ng-click中，ng-click触发两次

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>

我遇到的问题是，当我点击updateSubNav时，它会自动触发updateNav。如何阻止触发updateNav当我点击updateSubNav时（因为我希望这两种方法独立工作？

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

这是事件冒泡的工作原理，您需要stopPropagation内部div点击事件以防止向上发生。

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

您可以将$event对象传递给updateSubNav方法＆amp; stopPropagation来自那里的事件@Tushar已在他的回答中显示。

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