Apa cara terbaik untuk membatalkan propagasi acara antara panggilan ng-klik bersarang?

Ini sebuah contoh. Katakanlah saya ingin memiliki hamparan gambar seperti banyak situs. Jadi ketika Anda mengklik thumbnail, overlay hitam muncul di seluruh jendela Anda, dan versi gambar yang lebih besar berada di tengahnya. Mengklik overlay hitam mengabaikannya; mengklik gambar akan memanggil fungsi yang menampilkan gambar berikutnya.

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

Masalahnya adalah bahwa dengan pengaturan ini, jika Anda mengklik gambar, keduanya nextImage()dan hideOverlay()dipanggil. Tetapi yang saya inginkan hanyalah nextImage()dipanggil.

Saya tahu Anda dapat menangkap dan membatalkan acara dalam nextImage()fungsi seperti ini:

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

... Tapi saya ingin tahu apakah ada cara AngularJS yang lebih baik untuk melakukannya yang tidak mengharuskan saya untuk awalan semua fungsi pada elemen di dalam overlay dengan cuplikan ini.

Apa yang dikatakan @JosephSilber, atau meneruskan objek $ event ke dalam ng-clickcallback dan menghentikan propagasi di dalamnya:

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

Gunakan $event.stopPropagation():

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

Berikut ini demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Saya suka ide menggunakan arahan untuk ini:

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

Kemudian gunakan direktif seperti:

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

Jika Anda mau, Anda bisa menjadikan solusi ini lebih umum seperti jawaban ini untuk pertanyaan yang berbeda: https://stackoverflow.com/a/14547223/347216

Terkadang, mungkin paling masuk akal untuk melakukan ini:

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

Saya memilih untuk melakukannya dengan cara ini karena saya tidak ingin myClickHandler()menghentikan penyebaran acara di banyak tempat lain yang digunakan.

Tentu, saya bisa menambahkan parameter boolean ke fungsi handler, tetapi stopPropagation()jauh lebih bermakna dari sekedar true.

Ini bekerja untuk saya:

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

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

Jika Anda tidak ingin harus menambahkan berhenti propagasi ke semua tautan ini berfungsi juga. Sedikit lebih scalable.

$scope.hideOverlay( $event ){

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

}

Jika Anda memasukkan ng-klik = "$ event.stopPropagation" pada elemen induk dari templat Anda, stopPropogation akan ketahuan saat gelembung naik ke pohon, jadi Anda hanya perlu menulisnya sekali untuk seluruh templat Anda.

Anda dapat mendaftarkan arahan lain di atas ng-clickyang mengubah perilaku default ng-clickdan menghentikan propagasi acara. Dengan cara ini Anda tidak perlu menambahkan $event.stopPropagationdengan tangan.

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>

DI pengontrol digunakan

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