What's the best way to cancel event propagation between nested ng-click calls?

Question

Here\'s an example. Let\'s say I want to have an image overlay like a lot of sites. So when you click a thumbnail, a black overlay appears over your whole window, and a la

Answer 1

You can register another directive on top of ng-click which amends the default behaviour of ng-click and stops the event propagation. This way you wouldn't have to add $event.stopPropagation by hand.

app.directive('ngClick', function() {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            return function(scope, element, attr) {
                element.on('click', function(event) {
                    event.stopPropagation();
                });
            };
        }
    }
});