AngularJS NG单击stopPropagation [英] AngularJS ng-click stopPropagation

问题描述

我有一个表行点击事件，并在此行中也有一个删除按钮，一次点击的事件。当我点击删除按钮就行了点击事件也被解雇。这里是我的code。

I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired. Here is my code.

    <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>

我如何prevent，当我点击表格中的单元格中的删除按钮的showUser事件被触发？

How can I prevent that the showUser Event is fired when i click the delete Button in the table cell?

推荐答案

ngClick指令（以及其他所有事件的指令）将创建 $事件变量，它可在同一范围。这个变量是JS参考事件对象，并可以用来调用 stopPropagation（）：

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation():

<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

这篇关于AngularJS NG单击stopPropagation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！