AngularJS: Wie stoppe ich die Ereignisausbreitung von ng-click?

Question

Ich habe Anweisung, die so etwas wie dies tut:

app.directive('custom', function(){ 
    return { 
     restrict:'A', 
     link: function(scope, element){ 
      element.bind('click', function(){ 
       alert('want to prevent this'); 
      }); 

     } 
    } 
}); 

ja, es ist notwendig, jQuery-Wege-Bindung für diesen Fall zu tun.

Und jetzt möchte ich dieses Ereignis (Klick) zu stoppen, wenn eine Bedingung erfüllt.

zu tun versucht:

$event.stopPropagation(); 
    $event.preventDefault(); 

aber es hat nicht geholfen.

hier Geige zum Beispiel - http://jsfiddle.net/STEVER/5bfkbh7u/

Answer 1

In Ihrem Fall können Sie die Propagierung nicht stoppen, da click -Ereignis auf demselben Element passiert, es gibt nur zwei verschiedene Handler.

Sie können jedoch die Tatsache nutzen, dass dies das gleiche Ereignisobjekt in beiden Controller ngClick und in Direktive ist. Also, was Sie tun können, ist eine Eigenschaft auf dieses Ereignis Objekt zu setzen und prüfen, ob es in der Richtlinie:

$scope.dosomething = function($event){ 
    $event.stopPropagation(); 
    $event.preventDefault(); 
    alert('here'); 

    if (someCondtion) { 
     $event.stopNextHandler = true; 
    } 
} 

und in Richtlinie:

link: function(scope, element){ 
    element.bind('click', function(e) { 
     if (e.stopNextHandler !== true) { 
      alert('want to prevent this');  
     } 
    });    
} 

Demo:http://jsfiddle.net/5bfkbh7u/6/

Answer 2

gibt es nicht jede Ereignispropagierung hier, wie Sie Taste und Sie auf Ereignisse haben auf dem gleichen Element dieses nicht zu übergeordnete Element untergeordnetes Element gehen, dh kein Ereignis sprudeln oder Ereignis Capturing ist hier

Answer 3

Sie fügen beide Ereignisse an die Schaltfläche an. Überprüfen Sie das Element, wenn Sie das zweite Ereignis registrieren

<div ng-controller="mainCtrl" custom> 
    Hi! I'm the parent. 
    <button ng-click="dosomething($event)">BUTTON</button> 
</div> 

Showcase

Answer 4

Haben Sie senken versucht, die Priorität dieser Richtlinie sicherstellen, dass es nach der ng-Click-Richtlinie bindet? Ich gehe davon aus, dass die Ereignisse in der Reihenfolge ausgelöst werden, in der sie gebunden waren, was wiederum von der Priorität der ng-click-Anweisung gegenüber der Direktive bestimmt wird.

Sie benötigen auch stopImmediatePropagation, um zu verhindern, dass weitere Handler auf demselben Element ausgelöst werden. stopPropagation verhindert nur, dass das Ereignis an die übergeordneten Handler weitergegeben wird.

Answer 5

Use e.stopImmediatePropagation(); 
elem.bind('click', function (e) { 
    if (disable(scope)){ 
    e.stopImmediatePropagation(); 
    return false; 
    } 

    return true; 
});