Question

所以我一直在寻找答案，但我找不到答案。所以我所拥有的是特定类=“list-items”中项目的ng-repeat。当我点击项目中的每个项目时，它应该执行一个功能。在每个列表中，我有一个删除按钮，我想在点击时删除该项目。

所以一些代码供参考：

 <div ng-click="executeCallback($index)" class="list-items">
        <div class="item-info">
            <span>some info here</span>
        </div>
        <button ng-click="removeItem($index)">X</button>
 </div>

所以我现在做了，在我的CSS中，我尝试在按钮上使用绝对位置和类似10000的z索引来显示它大于，但是当我单击removeItem按钮时，它仍然调用executeCallback函数。我不希望它调用executeCallback函数。

有没有办法只在单击删除按钮而不是父类时调用removeItem函数？

Answer 1

您可以在一次ng-click中添加多个事件。

 <div ng-click="executeCallback($index)" class="list-items">
    <div class="item-info">
        <span>some info here</span>
    </div>
    <button ng-click="removeItem($index);$event.stopPropagation()">X</button>

Answer 2

ngClick和ngFocus等指令在该表达式的范围内公开$event对象。当jQuery存在时，该对象是jQuery Event Object的实例或类似的jqLite对象。 Source

您可以直接在HTML模板中使用此功能，通过调用$event.stopPropagation()来停止传播。只需将其添加到button即可，您应该没问题：

<button ng-click="removeItem($index);$event.stopPropagation()">X</button>

在同一个div中进行两次ng-click

2 个答案: