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。当我点击 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

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

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

您可以通过将 $event 对象传递给 updateSubNav 方法和 stopPropagation 事件的 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();
        }

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

ng-click triggered twice with in a nested ng-click

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click