AngularJS - multiple ng-click - event bubbling

Question

In the following example:

  <li ng-repeat="item in items" ng-click="showItem(item)">     <h3>{{item.title}}</h3>     <button ng-click="remove(item)">Remove</button>   </li> 

When I click on the button showItem() also is invoked due to event bubbling. I know that I can use $event to watch for $event.currentTarget and do $event.stopPropagation() etc. but this is very ugly.

Btw. I don't want to stop propagation on the button (In my case the button is a twitter bootstrap dopdown/button - this is just an example)

How do I stop showItem() from beeing called when I click on the remove button?

EDIT The ugly fix would be to have:

function remove(item,$event){   $event.originalEvent.prevent = true;   // rest of the code }  function showItem(item,$event){   if($event.originalEvent.prevent)return;   // rest of the code } 

Answer 1

This solution worked for me (I'm only supporting recent browsers, so I tried to modify the code to be more retro-compatible):

HTML:

<li ng-repeat="item in items" ng-click="showItem(item)">     <h3>{{item.title}}</h3>     <button ng-click="remove(item, $event)">Remove</button> </li> 

Scripts:

function remove(item, $event) {     // do some code here      // Prevent bubbling to showItem.     // On recent browsers, only $event.stopPropagation() is needed     if ($event.stopPropagation) $event.stopPropagation();     if ($event.preventDefault) $event.preventDefault();     $event.cancelBubble = true;     $event.returnValue = false; } function showItem(item) {     // code here } 

EDIT - Added a JSFiddle demo to try it out http://jsfiddle.net/24e7mapp/1/