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 larger version of the image is centered in it   Clicking the black overlay dismisses it  clicking the image will call a function that shows the next image   The html    lt div ng-controller  OverlayCtrl  class  overlay  ng-click  hideOverlay    gt       lt img src  http   some src  ng-click  nextImage     gt   lt  div gt    The javascript   function OverlayCtrl  scope         scope hideOverlay   function                Some code to hdie the overlay            scope nextImage   function                Some code to find and display the next image           The problem is that with this setup  if you click the image  both nextImage   and hideOverlay   are called   But what I want is for only nextImage   to be called   I know you can capture and cancel the event in the nextImage   function like this   if  window event        window event stopPropagation           But I want to know if there s a better AngularJS way of doing it that won t require me to prefix all of the functions on elements inside the overlay with this snippet

User · Accepted Answer

What  JosephSilber said  or pass the  event object into ng-click callback and stop the propagation inside of it    lt div ng-controller  OverlayCtrl  class  overlay  ng-click  hideOverlay    gt     lt img src  http   some src  ng-click  nextImage  event    gt   lt  div gt     scope nextImage   function  event       event stopPropagation         Some code to find and display the next image

User · Answer

Use  event stopPropagation      lt div ng-controller  OverlayCtrl  class  overlay  ng-click  hideOverlay    gt       lt img src  http   some src  ng-click  nextImage     event stopPropagation      gt   lt  div gt    Here s a demo  http   plnkr co edit 3Pp3NFbGxy30srl8OBmQ p preview

User · Answer

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    lt div ng-controller  OverlayCtrl  class  overlay  ng-click  hideOverlay    gt       lt img src  http   some src  ng-click  nextImage    stop-event  gt   lt  div gt    If you wanted  you could make this solution more generic like this answer to a different question  https   stackoverflow com a 14547223 347216

User · Answer

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

User · Answer

lt div ng-click  methodName event   gt  lt  div gt    IN controller use   scope methodName   function event         event stopPropagation

User · Answer

If you don t want to have to add the stop propagation to all links this works as well  A bit more scalable    scope hideOverlay   event           only hide the overlay if we click on the actual div    if   event target className indexOf  overlay               hide overlay logic

User · Answer

Sometimes  it may make most sense just to do this    lt widget ng-click  myClickHandler     event stopPropagation     gt    I chose to do it this way because I didn t want myClickHandler   to stop the event propagation in the many other places it was used   Sure  I could ve added a boolean parameter to the handler function  but stopPropagation   is much more meaningful than just true

User · Answer

If you insert ng-click   event stopPropagation  on the parent element of your template  the stopPropogation will be caught as it bubbles up the tree  so you only have to write it once for your entire template

User · Answer

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

User · Answer

This works for me        lt a href    ng-click  doSomething  event   gt Action lt  a gt   this doSomething   function  event       event stopPropagation       event preventDefault

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

Examples related to angularjs