Comment puis-je faire une AngularJS directive stopPropagation?

Question

Je suis en train de "stopPropagation" pour éviter un Twitter Bootstrap barre de navigation déroulant à compter de la clôture lorsqu'un élément (lien) à l'intérieur d'un li est cliqué. En utilisant cette méthode semble être la commune la solution.

Dans Angulaire, apparaît comme une directive est l'endroit pour le faire? J'ai donc:

// do not close dropdown on click
directives.directive('stopPropagation', function () {
    return {
        link:function (elm) {            
            $(elm).click(function (event) {                
                event.stopPropagation();
            });
        }
    };
});

... mais la méthode n'appartient pas à l'élément:

TypeError: Object [object Object] has no method 'stopPropagation'

Je l'attache dans la directive

<li ng-repeat="foo in bar">
  <div>
    {{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
  </div>
</li>

Toutes les suggestions?

Answer 1

J'ai utilisé de cette façon: Créé une directive:

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

qui pourrait être utilisé de cette façon:

<a ng-click='expression' stop-event='click'>

C'est plus générique façon de stopper la propagation de tout type d'événements.

Answer 2

"Actuellement, certaines directives (c'est à dire ng:cliquez sur) arrête la propagation de l'évènement. Cela empêche l'interopérabilité avec d'autres cadres qui s'appuient sur la capture de tels événements." - lien

... et a été en mesure de résoudre sans une directive, et il suffit de faire:

<a ng-click="doThing($index); $event.stopPropagation();">x</a>

Answer 3

stopPropagation doit être appelée sur un objet d'événement, pas l'élément lui-même. Voici un exemple:

compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}