web-dev-qa-db-fra.com

Comment puis-je créer une directive AngularJS pour arrêter la propagation?

J'essaie de "stopPropagation" pour empêcher un Twitter Bootstrap navbar dropdown de se fermer lorsqu'un élément (lien) dans un lien est cliqué. Utiliser cette méthode semble être la règle la plus courante solution .

Dans Angular, cela semble être une directive est l'endroit pour faire cela? Donc j'ai:

// 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 lie la directive avec

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

Aucune suggestion?

javascriptjqueryangularjsstoppropagation
75
Robert Christian

"Actuellement, certaines directives (par exemple, ng: click) arrêtent la propagation d'événements. Ceci empêche l'interopérabilité avec d'autres infrastructures reposant sur la capture de tels événements." - lien

... et était capable de réparer sans directive, et simplement faire:

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

J'ai utilisé cette méthode: Création d'une directive:

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

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

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

C'est une manière plus générique d'empêcher la propagation de tout type d'événement.

155
Valentyn Shybanov

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

compile: function (Elm) {
    return function (scope, Elm, attrs) {
        $(Elm).click(function (event) {
            event.stopPropagation();
        });
    };
}
9
Joseph Silber

Voici une directive simple et abstraite pour arrêter la propagation d'événements. Je pense que cela pourrait être utile à quelqu'un. Passez simplement dans le cas où vous souhaitez vous arrêter.

<div stopProp="click"></div>

app.directive('stopProp', function () {
  return function (scope, Elm, attrs) {
    Elm.on(attrs.stopProp, function (event) {
        event.stopPropagation();
    });
  };
});
1
Vinny