How do I create a custom event in an AngularJs service

Question

I am working on an AngularJs project. I have a service which sets and removes events on some buttons. This service is utilized by another service which I do not want to interact directly with the buttons. However I would like a button click event to be filtered up through the first service and handled in the second one. Since I don't want the second service to be aware of the buttons, I figure I will need to create a custom event in the first service. How can I create a custom event and fire it when a button is clicked?

Thanks in advance.

Answer 1

If you want to send an event between services/directives use broadcast:

$rootScope.$broadcast('buttonPressedEvent'); 

And recieve it like this:

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

Answer 2

Any global scope based integration would hurt namespacing and could result terrible side-effects in middle and large size applications. I recommend a bit more complicated but definitely cleaner solution, using proxy service.

1. Create proxy service

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. Create button directive which is using the userClickingHelper as a dependency.

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

3. Register your unrelated service with using the proxy.

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

The result is an isolated scope of event distribution, yet neither the directive, nor the service knows about each other. It is also easier to unit-test.

I am using similar solution for globally accessable "Loading" modal so I can abstract the way a controller/service is saying "user should not click or anything right now".