Como posso criar uma diretiva AngularJS para interromper a propagação?

Eu estou tentando “stopPropagation” para impedir que uma lista suspensa do Twitter Bootstrap navbar feche quando um elemento (link) dentro de um li é clicado. Usando este método parece ser a solução comum.

Em Angular, parece que uma diretriz é o lugar para fazer isso? Então eu tenho:

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

… mas o método não pertence ao elemento:

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

Eu amarro na diretiva com

 
  • {{foo.text}}clickme
  • Alguma sugestão?

    Eu usei dessa maneira: criei uma diretiva:

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

    que poderia ser usado assim:

      

    Esta é uma maneira mais genérica de interromper a propagação de qualquer tipo de evento.

    “Atualmente, algumas diretivas (ie ng: click) param a propagação de events. Isso impede a interoperabilidade com outras estruturas que dependem da captura de tais events.” – link

    … e foi capaz de corrigir sem uma diretiva, e simplesmente fazendo:

     x 

    stopPropagation deve ser chamado em um object de evento, não no próprio elemento. Aqui está um exemplo:

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

    Aqui está uma diretiva simples e abstrata para interromper a propagação de events. Eu acho que pode ser útil para alguém. Simplesmente passe no evento que você deseja parar.

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