Yuvalanmış ng-click çağrıları arasındaki olay yayılımını iptal etmenin en iyi yolu nedir?

İşte bir örnek. Diyelim ki birçok site gibi bir resim yer paylaşımım var. Dolayısıyla, bir küçük resmi tıkladığınızda, tüm pencerenizde siyah bir kaplama görünür ve görüntünün daha büyük bir sürümü ortada bulunur. Siyah kaplamayı tıklatmak onu kapatır; görüntüye tıklandığında sonraki görüntüyü gösteren bir işlev çağrılır.

Html:

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

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

Görüntüyü tıklatıp hem eğer sorun, bu kurulumla ilgili olduğunu nextImage()ve hideOverlay()denir. Ama istediğim sadece nextImage()çağrılmak.

nextImage()Bu gibi fonksiyondaki olayı yakalayıp iptal edebileceğinizi biliyorum :

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

... Ama bunu bu pasaj ile bindirme içindeki öğelerdeki tüm işlevlerin önekini eklememi gerektirmeyecek daha iyi bir AngularJS yolu olup olmadığını bilmek istiyorum.

@JosephSilber ne dedi, ya da $ event nesnesini ng-clickgeri aramaya aktar ve içindeki yayılımı durdur:

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

Kullanım $event.stopPropagation():

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

İşte bir demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Bunun için bir yönerge kullanma fikrini seviyorum:

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

Sonra aşağıdaki gibi yönergeyi kullanın:

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

İsterseniz, bu çözümü farklı bir sorunun cevabı gibi daha genel hale getirebilirsiniz: https://stackoverflow.com/a/14547223/347216

Bazen, sadece bunu yapmak en mantıklı olabilir:

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

Bu şekilde yapmayı seçtim çünkü myClickHandler()kullanıldığı birçok yerde olay yayılımını durdurmak istemedim .

Elbette, işleyici işlevine bir boole parametresi ekleyebilirdim, ancak stopPropagation()sadece çok daha anlamlı true.

Bu benim için çalışıyor:

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

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

Durdurma yayılımını tüm bağlantılara eklemek istemiyorsanız bu da işe yarar. Biraz daha ölçeklenebilir.

$scope.hideOverlay( $event ){

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

}

Şablonunuzun üst öğesine ng-click = "$ event.stopPropagation" eklerseniz, stopPropogation ağacı oluştururken yakalanır, böylece tüm şablonunuz için yalnızca bir kez yazmanız gerekir.

ng-clickÜstüne ng-clickolay yayılımının varsayılan davranışını değiştiren ve durduran başka bir yönerge kaydedebilirsiniz . Bu şekilde $event.stopPropagationelle eklemek zorunda kalmazsınız .

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>

IN denetleyici kullanımı

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