AngularJS - multiple ng-click - event bubbling

Question

Dans l'exemple suivant:

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

Quand je clique sur le bouton showItem() est également invoquée en raison de remontée d'événements. Je sais que je peux utiliser $event à surveiller $event.currentTarget et n' $event.stopPropagation() etc. mais c'est très laid.

Btw. Je ne veux pas arrêter la propagation sur l' button (Dans mon cas, l' button est twitter bootstrap dopdown/button - c'est juste un exemple)

Comment dois-je arrêter d' showItem() d'être appelé lorsque je clique sur l' remove bouton?

MODIFIER Le laid solution serait d'avoir:

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

Cette solution a fonctionné pour moi (je ne supporte que les navigateurs récents, alors j'ai essayé de modifier le code pour qu'il soit plus rétro-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 - Ajout d’une démo JSFiddle pour l’essayer http://jsfiddle.net/24e7mapp/1/

Answer 2

showItem peut être mis à jour pour revenir plus tôt si le passé dans item n'existe plus:

 function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}