AngularJS - nhiều ng-click - sự kiện bọt

Question

Trong ví dụ sau:

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

Khi tôi bấm vào nút showItem() cũng được gọi do sự kiện bọt. Tôi biết rằng tôi có thể sử dụng $event để xem cho $event.currentTarget và thực hiện $event.stopPropagation() vv nhưng điều này rất xấu.

Btw. Tôi không muốn dừng công tác tuyên truyền trên button (Trong trường hợp của tôi button là một twitter bootstrapdopdown/button - đây chỉ là một ví dụ)

Làm thế nào để ngăn chặn showItem() từ beeing gọi khi tôi bấm vào nút remove?

EDIT Việc sửa chữa xấu xí sẽ có:

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

Giải pháp này làm việc cho tôi (Tôi chỉ hỗ trợ các trình duyệt gần đây, vì vậy tôi đã cố gắng sửa đổi mã để tương thích với retro hơn):

HTML:

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

Scripts:

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 - Thêm một bản demo JSFiddle để thử nó ra http://jsfiddle.net/24e7mapp/1/

Answer 2

showItem có thể được cập nhật để trở lại sớm nếu thông qua tại item không còn tồn tại:

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