What's the best way to cancel event propagation between nested ng-click calls?
What @JosephSilber said, or pass the $event object into ng-click
callback and stop the propagation inside of it:
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
<img src="http://some_src" ng-click="nextImage($event)"/>
</div>
$scope.nextImage = function($event) {
$event.stopPropagation();
// Some code to find and display the next image
}
Use $event.stopPropagation()
:
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
<img src="http://some_src" ng-click="nextImage(); $event.stopPropagation()" />
</div>
Here's a demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview
I like the idea of using a directive for this:
.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('click', function (e) {
e.stopPropagation();
});
}
};
});
Then use the directive like:
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
<img src="http://some_src" ng-click="nextImage()" stop-event/>
</div>
If you wanted, you could make this solution more generic like this answer to a different question: https://stackoverflow.com/a/14547223/347216