AngularJS ng单击停止传播

Question

我有一个点击事件表行，在这一行也有一个删除按钮点击事件。当我单击删除按钮时，行上的单击事件也会被触发。

这是我的代码。

html prettyprint-override"><tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

当我单击表格单元格中的删除按钮时，如何防止触发showUser事件？

Answer 1

我写了一个指令，让你限制点击有效果的区域。它可以用于像这样的特定场景，所以不必逐个处理点击，你可以说“点击不会来自这个元素”。

你会这样使用它：

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

请记住，这将阻止所有点击最后一个单元格，而不仅仅是按钮。如果这不是您想要的，您可能希望像这样包装按钮：

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

以下是指令代码：

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

Answer 2

斯图伊回答的补充。如果您的回调决定是否应该停止传播，我发现将$event对象传递给回调很有用：

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

然后在回调本身中，您可以决定是否应停止事件的传播：

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

Answer 3

ngclick指令（以及所有其他事件指令）创建在同一作用域上可用的$event变量。这个变量是对JS事件对象的引用，可以用来调用停止传播（）：

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER