40

在以下示例中：

  <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 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
}
4

2 回答 2

63

这个解决方案对我有用（我只支持最近的浏览器，所以我尝试修改代码以更加兼容）：

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/

于 2013-06-13T15:30:56.920 回答
0

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

function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}
于 2013-05-22T21:30:59.483 回答