AngularJS ng-click 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
An addition to Stewie's answer. In case when your callback decides whether the propagation should be stopped or not, I found it useful to pass the $event
object to the callback:
<div ng-click="parentHandler($event)">
<div ng-click="childHandler($event)">
</div>
</div>
And then in the callback itself, you can decide whether the propagation of the event should be stopped:
$scope.childHandler = function ($event) {
if (wanna_stop_it()) {
$event.stopPropagation();
}
...
};