Wie kann die Ereignisweitergabe zwischen verschachtelten ng-click-Aufrufen am besten abgebrochen werden?

Hier ist ein Beispiel. Angenommen, ich möchte eine Bildüberlagerung wie bei vielen Websites. Wenn Sie also auf eine Miniaturansicht klicken, wird über Ihrem gesamten Fenster eine schwarze Überlagerung angezeigt, in der eine größere Version des Bildes zentriert ist. Durch Klicken auf das schwarze Overlay wird es geschlossen. Durch Klicken auf das Bild wird eine Funktion aufgerufen, die das nächste Bild anzeigt.

Das HTML:

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

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

Das Problem ist, dass bei diesem Setup, wenn Sie auf das Bild klicken, beide nextImage()und hideOverlay()aufgerufen werden. Aber ich möchte nur nextImage()angerufen werden.

Ich weiß, dass Sie das Ereignis in der folgenden nextImage()Funktion erfassen und abbrechen können:

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

... Aber ich möchte wissen, ob es eine bessere AngularJS-Methode gibt, bei der ich nicht alle Funktionen von Elementen innerhalb des Overlays mit diesem Snippet voranstellen muss.

Was @JosephSilber gesagt hat, oder übergeben Sie das $ event-Objekt an einen ng-clickRückruf und stoppen Sie die Weitergabe darin:

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

Verwendung $event.stopPropagation():

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

Hier ist eine Demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Ich mag die Idee, eine Richtlinie dafür zu verwenden:

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

Verwenden Sie dann die Direktive wie folgt:

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

Wenn Sie möchten, können Sie diese Lösung allgemeiner gestalten, wie diese Antwort auf eine andere Frage: https://stackoverflow.com/a/14547223/347216

Manchmal ist es am sinnvollsten, dies einfach zu tun:

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

Ich habe mich dafür entschieden, weil ich myClickHandler()die Ereignisausbreitung an den vielen anderen Orten, an denen sie verwendet wurde, nicht stoppen wollte .

Sicher, ich hätte der Handlerfunktion einen booleschen Parameter hinzufügen können, aber das stopPropagation()ist viel aussagekräftiger als nur true.

Das funktioniert bei mir:

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

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

Wenn Sie nicht möchten, dass die Stop-Weitergabe zu allen Links hinzugefügt wird, funktioniert dies ebenfalls. Ein bisschen skalierbarer.

$scope.hideOverlay( $event ){

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

}

Wenn Sie ng-click = "$ event.stopPropagation" in das übergeordnete Element Ihrer Vorlage einfügen, wird stopPropogation beim Sprudeln des Baums abgefangen, sodass Sie es nur einmal für Ihre gesamte Vorlage schreiben müssen.

Sie können eine weitere Direktive registrieren, ng-clickdie das Standardverhalten von ändert ng-clickund die Ereignisausbreitung stoppt. Auf diese Weise müssten Sie nicht $event.stopPropagationvon Hand hinzufügen .

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 Controller verwenden

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