AngularJS ng-click stopPropagation

Question

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

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

Answer 1

To prevent that the showUser event is fired when you click the delete button in the table cell so the problem here is with ngClick directive which creates $event variable which is available on the 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>