javascript - link - ¿Cómo puedo hacer una directiva AngularJS para detener la propagación?

directivas personalizadas angularjs

Question

Estoy intentando "detener la propagación" para evitar que se cierre un menú desplegable de la barra de navegación de Twitter Bootstrap cuando se hace clic en un elemento (enlace) dentro de un li. Usar este método parece ser la solution común.

En Angular, parece una directiva es el lugar para hacer esto? Así que tengo:

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

... pero el método no pertenece al elemento:

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

Ato la directiva con

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

¿Alguna sugerencia?

Answer 1

Aquí hay una directiva simple y abstracta para detener la propagación de eventos. Me imagino que podría ser útil para alguien. Simplemente pase en caso de que quiera detenerse.

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

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

Answer 2

Lo he usado de esta manera: he creado una directiva:

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

que podría usarse de esta manera:

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

Esta es una forma más genérica de detener la propagación de cualquier tipo de evento.

Answer 3

stopPropagation debe stopPropagation en un objeto de evento, no en el elemento en sí. Aquí hay un ejemplo:

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

Answer 4

"Actualmente, algunas directivas (es decir, ng: clic) detienen la propagación de eventos. Esto evita la interoperabilidad con otros marcos que dependen de la captura de dichos eventos". - link

... y fue capaz de arreglar sin una directiva, y simplemente haciendo:

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