angularjs - Wiele ng-click - event przepuszczając

Question

W poniższym przykładzie:

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

Po kliknięciu na przycisk showItem() również wywoływany jest spowodowany przypadku propagacji. Wiem, że mogę użyć $event do obejrzenia dla $event.currentTarget i zrobić $event.stopPropagation() itp., Ale to jest bardzo brzydkie.

Przy okazji. Nie chcę, aby zatrzymać rozprzestrzenianie się na button (w moim przypadku button jest twitter bootstrapdopdown/button - to tylko przykład)

Jak zatrzymać showItem() od beeing nazywany po kliknięciu na przycisk remove?

EDIT Brzydki fix byłoby mieć:

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

Rozwiązanie to działało dla mnie (używam tylko najnowszych przeglądarek, więc starałem się zmodyfikować kod, aby był bardziej kompatybilny z retro):

HTML:

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

Skrypty:

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 - Dodano demo JSFiddle go wypróbować http://jsfiddle.net/24e7mapp/1/

Answer 2

showItem mogą być aktualizowane, aby powrócić na początku, jeśli przekazany w item już nie istnieje:

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