AngularJS - Multiple ng-click - evento di bubbling

Question

Nel seguente esempio:

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

Quando clicco sul pulsante showItem() anche viene richiamato a causa di evento di bubbling. So che posso usare $event per guardare $event.currentTarget e fare $event.stopPropagation() ecc. Ma questo è molto brutto.

Btw. Non voglio smettere di propagazione sul button (Nel mio caso il button è un twitter bootstrapdopdown/button - questo è solo un esempio)

Come arresto showItem() da beeing chiamato quando clicco sul pulsante remove?

EDIT Il brutto correzione sarebbe quella di avere:

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

Questa soluzione ha funzionato per me (sto solo supportando i browser recenti, quindi ho provato a modificare il codice per renderlo più retro-compatibile):

HTML:

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

Script:

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 - Aggiunto un demo JSFiddle di provarlo http://jsfiddle.net/24e7mapp/1/

Answer 2

showItem può essere aggiornato per tornare presto se il passato in item non esiste più:

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