AngularJS ng-click stopPropagation

Question

I have a click Event on a table row and in this row there is also a delete Button with a click Event  When i click the delete button the click Event on the row is also fired    Here is my code    lt tbody gt     lt tr ng-repeat  user in users  class  repeat-animation  ng-click  showUser user   index   gt       lt td gt   user firstname   lt  td gt       lt td gt   user lastname   lt  td gt       lt td gt   user email   lt  td gt       lt td gt  lt button class  btn red btn-sm  ng-click  deleteUser user id   index   gt Delete lt  button gt  lt  td gt     lt  tr gt   lt  tbody gt    How can I prevent that the showUser Event is fired when i click the delete Button in the table cell

User · Accepted Answer

ngClick directive  as well as all other event directives  creates  event variable which is available on same scope  This variable is a reference to JS event object and can be used to call stopPropagation      lt table gt     lt tr ng-repeat  user in users  ng-click  showUser user   gt       lt td gt   user firstname   lt  td gt       lt td gt   user lastname   lt  td gt       lt td gt         lt button class  btn  ng-click  deleteUser user id   index    event stopPropagation     gt          Delete        lt  button gt       lt  td gt                   lt  tr gt   lt  table gt    PLUNKER

User · Answer

An addition to Stewie s answer  In case when your callback decides whether the propagation should be stopped or not  I found it useful to pass the  event object to the callback    lt div ng-click  parentHandler  event   gt     lt div ng-click  childHandler  event   gt     lt  div gt   lt  div gt    And then in the callback itself  you can decide whether the propagation of the event should be stopped    scope childHandler   function   event      if  wanna stop it           event stopPropagation

User · Answer

I wrote a directive which lets you limit the areas where a click has effect  It could be used for certain scenarios like this one  so instead of having to deal with the click on a case by case basis you can just say  clicks won t come out of this element    You would use it like this    lt table gt     lt tr ng-repeat  user in users  ng-click  showUser user   gt       lt td gt   user firstname   lt  td gt       lt td gt   user lastname   lt  td gt       lt td isolate-click gt         lt button class  btn  ng-click  deleteUser user id   index    gt          Delete        lt  button gt       lt  td gt                   lt  tr gt   lt  table gt    Keep in mind that this would prevent all clicks on the last cell  not just the button  If that s not what you want you may want to wrap the button like this    lt span isolate-click gt       lt button class  btn  ng-click  deleteUser user id   index    gt          Delete      lt  button gt   lt  span gt    Here is the directive s code   angular module  awesome       directive  isolateClick   function         return           link  function scope  elem                elem on  click   function e                   e stopPropagation

User · Answer

lt ul class  col col-double clearfix  gt    lt li class  col  item  ng-repeat  location in searchLocations  gt      lt label gt       lt input type  checkbox  ng-click  onLocationSelectionClicked  event   checklist-model  selectedAuctions locations  checklist-value  location code  checklist-change  auctionSelectionChanged    id    location code    gt    location displayName       lt  label gt      scope onLocationSelectionClicked   function  event          if  scope limitSelectionCountTo  amp  amp           scope selectedAuctions locations length     scope limitSelectionCountTo              event currentTarget checked false

User · Answer

In case that you re using a directive like me this is how it works when you need the two data way binding for example after updating an attribute in any model or collection   angular module  yourApp   directive  setSurveyInEditionMode   setSurveyInEditionMode   function setSurveyInEditionMode       return       restrict   A       link  function scope  element   attributes          element on  click   function event           event stopPropagation               In order to work with stopPropagation and two data way binding            if you don t use scope  apply in my case the model is not updated in the view when I click on the element that has my directive         scope  apply function                scope mySurvey inEditionMode   true            console log  inside the directive                                       Now  you can easily use it in any button  link  div  etc  like so    lt button set-survey-in-edition-mode  gt Edit survey lt  button gt

[javascript] AngularJS ng-click stopPropagation

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-click