javascript - 从 AngularJS 服务销毁事件监听器

Question

我写了这个工厂:

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

每次我需要广播事件时使用...这也让我有机会在我的代码中记录每个 $on 和 $broadcast 事件。现在的问题是我不知道如何访问 $scope.$on('$destroy') 来注销我的 $rootScope 监听器。

有人对此有什么建议吗？

Answer 1

上周我一直在努力解决这个问题，我想出了一个很好的解决方案。基于此blog post ，想法是创建一个服务，就像您所做的那样，以集中应用程序中的事件处理，即删除监听器并公开所有事件名称。我还会检查事件名称，以在发布或订阅事件时警告拼写错误。

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

}


})();

然后您可以调用该服务来订阅或将数据发布到事件中，例如，

eventService.publish(eventService.LOGIN, userObject);

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

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

        });

要直接回答问题，您的问题的解决方案可能是将 $scope 传递给您的 on 方法。