如何截获angular.js中的所有$ rootScope。$广播事件

Question

我有可能影响一个视图元素的多个$rootScope.$broadcast事件。我想要有一个分层功能来决定哪个事件优先进行视图。

我的问题是，我怎么能听$rootScope编辑的所有事件$broadcast？是否有某种事件拦截器？

Answer 1

你不能这样做，那将是一种反模式。

相反，你应该创建处理事件的排放和处理的服务，所以你可以从那里做这一切的逻辑：在你的代码

events.onAll(function(name, data) { 
    console.log('Broadcasted event:', name, data); 
}); 

events.broadcast('foo', data1); 
events.broadcast('bar', data2); 

这样，你不仅会

module.service('events', function($rootScope) { 
    var onAllCallbacks = []; 

    this.broadcast = function(name, data) { 
    $rootScope.$broadcast(name, data); 
    onAllCallbacks.forEach(function(cb) { cb(name, data); }); 
    } 

    this.on = function(name, callback) { 
    $rootScope.$on(name, callback); 
    } 

    this.onAll = function(callback) { 
    onAllCallbacks.push(callback); 
    } 
}) 

然后请使用events.broadcast来广播您想要从onAll监听器获知的事件。

Answer 2

$ rootScope。$ broadcast将自动'广播'该变量/对象的结果。当你需要另一端时，是监听器 - $ rootScope。$ on。它看起来像这样：

//broadcast 
$rootScope.$broadcast('variableName'); 

//listener 
$rootScope.$on('variableName', function(event, args){ 
    //do whatever you want in here when 'variableName' is broadcasted 
}); 

Answer 3

我在寻找同样问题的解决方案。在我看来，你也在寻找cairp的解决方案https://github.com/angular/angular.js/issues/6043。

这样做的好处是您可以将其留在开发中，而不需要将其包含在生产代码中，而无需更改应用程序中的任何逻辑。

我会从链接，后人复制代码，稍作调整（与角当前版本的工作）：约$ provide.decorate

app.config(function($provide) { 
    $provide.decorator("$rootScope", function($delegate) { 
    var Scope = $delegate.constructor; 
    var origBroadcast = Scope.prototype.$broadcast; 
    var origEmit = Scope.prototype.$emit; 

    Scope.prototype.$broadcast = function() { 
     console.log("$broadcast was called on $scope " + this.$id + " with arguments:", 
        arguments); 
     return origBroadcast.apply(this, arguments); 
    }; 
    Scope.prototype.$emit = function() { 
     console.log("$emit was called on $scope " + this.$id + " with arguments:", 
        arguments); 
     return origEmit.apply(this, arguments); 
    }; 
    return $delegate; 
    }); 
}); 

更多信息：

[1 ] http://blog.xebia.com/extending-angularjs-services-with-the-decorate-method/

[2] https://docs.angularjs.org/api/auto/service/ $试图帮助提供