AngularJS - множественные нг-Клик - событие кипящего

Question

В следующем примере:

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

При нажатии на кнопке showItem() также вызывается из-за событие пузыриться. Я знаю, что могу использовать $event для просмотра $event.currentTarget и делать $event.stopPropagation() и т. Д., Но это очень уродливо.

КПП. Я не хочу, чтобы остановить распространение на button (В моем случае button является twitter bootstrapdopdown/button - это просто пример)

Как остановить showItem() от неоспоримым называется, когда я нажимаю на кнопку remove? не

EDIT Уродливый исправление будет иметь:

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

Это решение работало для меня (я поддерживаю только последние браузеры, поэтому я попытался изменить код на более ретро-совместимый):

HTML:

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

Сценарии:

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 - Добавлен JSFiddle демо, чтобы попробовать его http://jsfiddle.net/24e7mapp/1/

Answer 2

showItem может быть обновлен, чтобы вернуться рано, если передаваемая в item больше не существует:

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