AngularJS - множественный ng-click - событие пузыря

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

  <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() и т.д., Но это очень уродливо.

Btw. Я не хочу останавливать распространение на button (в моем случае button есть twitter bootstrap dopdown/button - это только пример)

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

ИЗМЕНИТЬ Уродливое исправление было бы иметь:

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
}

Ответ 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/

Ответ 2

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

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