AngularJS ng-click stopPropagation

Tôi có một nhấp chuột Sự kiện trên một hàng của bảng và trong hàng này cũng có một nút xóa với một sự kiện nhấp chuột. Khi tôi nhấp vào nút xóa, nhấp vào Sự kiện trên hàng cũng được kích hoạt.

Đây là mã của tôi.

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

Làm cách nào để ngăn showUsersự kiện được kích hoạt khi tôi nhấp vào nút xóa trong ô của bảng?

Chỉ thị ngClick (cũng như tất cả các chỉ thị sự kiện khác) tạo ra $eventbiến có sẵn trên cùng một phạm vi. Biến này là một tham chiếu đến eventđối tượng JS và có thể được sử dụng để gọi stopPropagation():

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

Một bổ sung cho câu trả lời của Stewie. Trong trường hợp khi cuộc gọi lại của bạn quyết định liệu việc truyền có nên dừng lại hay không, tôi thấy việc truyền $eventđối tượng cho cuộc gọi lại là hữu ích :

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

Và sau đó trong chính cuộc gọi lại, bạn có thể quyết định liệu việc truyền bá sự kiện có nên được dừng lại hay không:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

Tôi đã viết một chỉ thị cho phép bạn giới hạn các khu vực nơi một nhấp chuột có hiệu lực. Nó có thể được sử dụng cho một số trường hợp nhất định như kịch bản này, vì vậy thay vì phải xử lý nhấp chuột theo từng trường hợp, bạn chỉ có thể nói "nhấp chuột sẽ không xuất phát từ yếu tố này".

Bạn sẽ sử dụng nó như thế này:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

Hãy nhớ rằng điều này sẽ ngăn tất cả các nhấp chuột vào ô cuối cùng, không chỉ nút. Nếu đó không phải là những gì bạn muốn, bạn có thể muốn quấn nút như thế này:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

Đây là mã của lệnh:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

Trong trường hợp bạn đang sử dụng một lệnh như tôi thì đây là cách nó hoạt động khi bạn cần ràng buộc hai cách dữ liệu sau khi cập nhật một thuộc tính trong bất kỳ mô hình hoặc bộ sưu tập nào:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

Bây giờ, bạn có thể dễ dàng sử dụng nó trong bất kỳ nút, liên kết, div, v.v.

<button set-survey-in-edition-mode >Edit survey</button>

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };