Pregunta ¿Cómo puedo hacer una directiva AngularJS para detener la propagación?


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. El uso de este método parece ser el común solució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?


73
2018-01-27 05:34


origen


Respuestas:


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.


150
2018-01-27 12:18



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

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

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

120
2018-01-27 06:25



stopPropagation tiene que ser llamado 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();
        });
    };
}

8
2018-01-27 05:36



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();
    });
  };
});


1
2017-11-06 16:54