Ng 点击 <li> Ng 点击里面

Question

我有以下代码：

 <ul class="dropdown-menu">
   <li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
   <li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
 </ul>

如果选择值，我正在切换类。我想在图标上添加一个事件（只有在选择它时才可见），但是，每当我单击该图标时，都会触发两次 ng-click。我的问题是：如何在选中行时禁用父元素上的 ng-click？

Answer 1

您需要将 $event.stopPropagation() 添加到您的内部 ng-click：

<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>

这将阻止调用父元素上的 ng-click。

Answer 2

当您在 DOM 元素中编写和事件时，它的调用冒泡到调用事件附加到它的所有父元素直到 HTML 标记。

您可以通过防止事件进一步传播来防止这种情况发生。 stopPropagation 正是这样做的。您可以在此处找到详细信息 https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

在你的unselect函数中，你可以这样调用

function unselect(event) {
    event.stopPropagation();
    // Your original code
}

Ng 点击 <li> Ng 点击里面

NgClick on <li> NgClick inside of it

angularjs

angularjs-ng-click