在嵌套的Ng-click中触发两次

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

本文关键字：两次 嵌套 Ng-click      更新时间：2023-09-26

当试图在列表中使用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(因为我希望这2种方法独立工作?

阻止事件传播。

视图: 

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

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

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

您可以通过将$event对象传递给updateSubNav方法&stopPropagation的事件从那里像@Tushar已经显示在他的回答。

这是由于事件冒泡

 <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();
        }
相关文章：