javascript - ¿Cómo creo un evento personalizado en un servicio de AngularJs?

events custom-events

Question

Estoy trabajando en un proyecto AngularJs. Tengo un servicio que establece y elimina eventos en algunos botones. Este servicio es utilizado por otro servicio que no quiero interactuar directamente con los botones. Sin embargo, me gustaría que un evento de clic de botón se filtre a través del primer servicio y se maneje en el segundo. Como no quiero que el segundo servicio tenga en cuenta los botones, creo que necesitaré crear un evento personalizado en el primer servicio. ¿Cómo puedo crear un evento personalizado y activarlo cuando se hace clic en un botón?

Gracias por adelantado.

Answer 1

Cualquier integración basada en el alcance global dañaría el espacio de nombres y podría resultar en efectos secundarios terribles en aplicaciones de tamaño medio y grande. Recomiendo una solución un poco más complicada pero definitivamente más limpia, utilizando un servicio proxy.

1. Crear un servicio proxy

angular.module(''app'').service(''userClickingHelper'', [
  function() {
    var listeners = [];
    return {
      click: function(args) {
        listeners.forEach(function(cb) {
          cb(args);
        });
      },
      register: function(callback) {
        listeners.push(callback);
      }
    };
  }
]);

2. Crear directiva de botón que está utilizando el usuarioHaciendo clic enHelper como una dependencia.

angular.module(''app'').directive(''onDistributedClick'', [''userClickingHelper'', function (userClickingHelper) {
    return {
        restrict: ''A'',
        link: function (scope, element) {
            element.on(''click'', userClickingHelper.click);
        }
    };
}]);

3. Registre su servicio no relacionado con el uso del proxy.

angular.module(''app'').service(''myUnrelatedService'', [function (userClickingHelper) {
    userClickingHelper.register(function(){
        console.log("The button is clicked somewhere");
    });
}]);

El resultado es un alcance aislado de la distribución de eventos, pero ni la directiva ni el servicio se conocen entre sí. También es más fácil realizar una prueba unitaria.

Estoy usando una solución similar para el modo de "carga" accesible globalmente, así puedo resumir la forma en que un controlador / servicio dice "el usuario no debe hacer clic ni nada en este momento".

Answer 2

Puede crear y emitir un evento con lo siguiente en su elemento

ng-click="$emit(''customEvent'')"

Luego, en tu controlador puedes usar

$rootScope.$on(''customEvent'', function(){
    // do something
})

Demo

Answer 3

Si desea enviar un evento entre servicios / directivas use broadcast :

$rootScope.$broadcast(''buttonPressedEvent'');

Y recíbelo así:

$rootScope.$on(''buttonPressedEvent'', function () {
             //do stuff
        })