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

In my case event.stopPropagation(); was making my page refresh each time I pressed on a link so I had to find another solution.

So what I did was to catch the event on the parent and block the trigger if it was actually coming from his child using event.target.

Here is the solution:

if (!angular.element($event.target).hasClass('some-unique-class-from-your-child')) ...

So basically your ng-click from your parent component works only if you clicked on the parent. If you clicked on the child it won't pass this condition and it won't continue it's flow.