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> 

当我点击buttonshowItem()也由于事件冒泡而被调用。 我知道我可以使用$event来观察$event.currentTarget并执行$event.stopPropagation()等，但这非常难看。

顺便说一句。 我不想停止button上的传播（在我的情况下， button是一个twitter bootstrap dopdown/button – 这只是一个例子）

当我点击removebutton时，如何停止showItem()从beeing调用？

编辑丑陋的修复将是有：

 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

这个解决scheme为我工作（我只支持最近的浏览器，所以我试图修改代码更复古兼容）：

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 } 

编辑 – 增加了一个JSFiddle演示来试试http://jsfiddle.net/24e7mapp/1/

Answer 2

如果传入的item不再存在， showItem可以更新以提前返回：

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