Cách tốt nhất để hủy lan truyền sự kiện giữa các cuộc gọi ng-click lồng nhau là gì?

Đây là một ví dụ. Giả sử tôi muốn có một lớp phủ hình ảnh giống như nhiều trang web. Vì vậy, khi bạn nhấp vào hình thu nhỏ, lớp phủ màu đen sẽ xuất hiện trên toàn bộ cửa sổ của bạn và một phiên bản lớn hơn của hình ảnh được đặt ở giữa. Nhấp vào lớp phủ màu đen sẽ loại bỏ nó; nhấp vào hình ảnh sẽ gọi một chức năng hiển thị hình ảnh tiếp theo.

Các html:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

Các javascript:

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // Some code to hdie the overlay
    }
    $scope.nextImage = function() {
        // Some code to find and display the next image
    }
}

Vấn đề là với thiết lập này, nếu bạn nhấp vào hình ảnh, cả hai nextImage()và hideOverlay()được gọi. Nhưng những gì tôi muốn là chỉ nextImage()được gọi.

Tôi biết bạn có thể chụp và hủy sự kiện trong nextImage()chức năng như thế này:

if (window.event) {
    window.event.stopPropagation();
}

... Nhưng tôi muốn biết liệu có cách nào tốt hơn để thực hiện AngularJS không yêu cầu tôi phải thêm tiền tố vào tất cả các chức năng trên các phần tử bên trong lớp phủ với đoạn mã này.

Những gì @JosephSilber đã nói, hoặc chuyển đối tượng sự kiện $ vào ng-clickcuộc gọi lại và dừng việc truyền bá bên trong nó:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
  <img src="http://some_src" ng-click="nextImage($event)"/>
</div>

$scope.nextImage = function($event) {
  $event.stopPropagation();
  // Some code to find and display the next image
}

Sử dụng $event.stopPropagation():

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage(); $event.stopPropagation()" />
</div>

Đây là bản demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Tôi thích ý tưởng sử dụng một chỉ thị cho việc này:

.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

Sau đó sử dụng chỉ thị như:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()" stop-event/>
</div>

Nếu bạn muốn, bạn có thể làm cho giải pháp này chung chung hơn như câu trả lời này cho một câu hỏi khác: https://stackoverflow.com/a/14547223/347216

Đôi khi, nó có thể có ý nghĩa nhất chỉ để làm điều này:

<widget ng-click="myClickHandler(); $event.stopPropagation()"/>

Tôi đã chọn làm theo cách này vì tôi không muốn myClickHandler() dừng việc truyền bá sự kiện ở nhiều nơi khác mà nó được sử dụng.

Chắc chắn, tôi đã có thể thêm một tham số boolean cho hàm xử lý, nhưng stopPropagation()có ý nghĩa hơn nhiều so với chỉ true.

Điều này làm việc cho tôi:

<a href="" ng-click="doSomething($event)">Action</a>

this.doSomething = function($event) {
  $event.stopPropagation();
  $event.preventDefault();
};

Nếu bạn không muốn phải thêm lan truyền dừng cho tất cả các liên kết thì điều này cũng hoạt động. Khả năng mở rộng hơn một chút.

$scope.hideOverlay( $event ){

   // only hide the overlay if we click on the actual div
   if( $event.target.className.indexOf('overlay') ) 
      // hide overlay logic

}

Nếu bạn chèn ng-click = "$ event.stopPropagation" vào phần tử cha của mẫu, thì stopPropogation sẽ bị bắt khi nó nổi lên trên cây, do đó bạn chỉ phải viết một lần cho toàn bộ mẫu.

Bạn có thể đăng ký một chỉ thị khác ở trên ng-clickđó sửa đổi hành vi mặc định ng-clickvà dừng việc truyền bá sự kiện. Bằng cách này, bạn sẽ không phải thêm $event.stopPropagationbằng tay.

app.directive('ngClick', function() {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            return function(scope, element, attr) {
                element.on('click', function(event) {
                    event.stopPropagation();
                });
            };
        }
    }
});

<div ng-click="methodName(event)"></div>

Bộ điều khiển IN sử dụng

$scope.methodName = function(event) { 
    event.stopPropagation();
}