从AngularJS服务中销毁事件侦听器

Question

I wrote this factory:

function myEvents($log, $rootScope) {
    var service = {
        broadcast: broadcast,
        on: on
    };

    return service;

    function broadcast(name, args) {
        $log.debug('broadcast event: ' + name);
        $rootScope.$broadcast(name, args);
    }

    function on(name, callback) {
        var listener = $rootScope.$on(name, function(event, args) {
            $log.debug('on event: ' + name);
            callback(event, args);
        });
    }
}

to use everytime I need to broadcast an event... this also gave me the chance to log each $on and $broadcast event in my code. The problem now is that I don't know how can I access the $scope.$on('$destroy') to unregister my $rootScope listeners.

Does anyone have any advice about it?

Answer 1

I struggled with this last week and came up with a good solution, I guess. Based on this blog post , the idea is to create a service, just as you did, to centralize event handling in the application, ie, remove listeners and expose all event names. I also check event names to warn against typos when publishing or subscribing to an event.

(function() {
'use strict';

angular
    .module('app')
    .factory('eventService', eventService)

eventService.$inject = ['$rootScope', '$log'];


function eventService($rootScope, $log) {

    return {
        subscribe: subscribe,
        publish: publish,
        LOGIN: 'login',
        LOGOUT: 'logout'
    }

    function subscribe(scope, event, callback) {
        safeCheck(this, event);
        var handler = $rootScope.$on(event, callback);
        scope.$on('$destroy', handler);
        return handler;
    }

    function publish(event, data) {
        safeCheck(this, event);
        $rootScope.$emit(event, data);
    }

    function safeCheck(serviceObject, event) {
        var safe = false;
        angular.forEach(serviceObject, function(value, key) {
            if(event == value) {
                safe = true;
            }
        });
        if(!safe) {
            $log.warn("Event " + event + " not found in service");
        }
    }

}


})();

Then you can call the service to subscribe to or publish data into an event, eg,

eventService.publish(eventService.LOGIN, userObject);

eventService.subscribe($scope, eventService.LOGIN, function(event, userObject) {

            $log.info("User logged in", userObject);

        });

To answer directly, a solution to your problem could be to pass the $scope to your on method.

Answer 2

Instead of your service, better to use decorator something like this:

 angular.module('app').config(['$provide', function ($provide) {
                  $provide.decorator('$rootScope', function ($delegate) {
                      var _emit = $delegate.$emit;
                      var _broadcast = $delegate.$broadcast;
                      var _on = $delegate.$on;

                      $delegate.$emit = function () {
                          $log.debug('emit', arguments);
                          return _emit.apply(this, arguments);
                      };

                      $delegate.$broadcast = function () {
                          $log.debug('broadcast', arguments);
                          return _broadcast.apply(this, arguments);
                      };
                      $delegate.$on = function () {
                          $log.debug('on', arguments);
                          return _on.apply(this, arguments);
                      };
                      return $delegate;
                  });
              }]);

and in your own code as usual $rootScope.$broadcast, $scope.$on and etc. it will decorate all functions in your app, and you can see also third party event, like from ui-router and other libraries