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

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:

If you wanted, you could make this solution more generic like this answer to a different question: https://stackoverflow.com/a/14547223/347216