我可能有多个$rootScope.$broadcast
事件影响一个视图元素。我想要一个层次函数来决定哪个事件优先影响视图。
我的问题是,如何收听$rootScope
上的所有事件$broadcast
?是否存在某种事件拦截器?
我在为同一个问题寻找解决方案。在遇到caitp的解决方案https://github.com/angular/angular.js/issues/6043我相信这也是你想要的。
这样做的优点是,您可以将其留在开发中,而不将其包含在生产代码中,而无需更改应用程序中的任何逻辑。
我将从链接中复制代码,供后人使用,并稍作调整(用于当前版本的angular):
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;
});
});
关于$provide.decorate:的更多信息
[1]http://blog.xebia.com/extending-angularjs-services-with-the-decorate-method/
[2]https://docs.angularjs.org/api/auto/service/$provide
您不能真正做到这一点,这将是一种反模式。
相反,您应该创建一个处理事件发射和处理的服务,这样您就可以从那里完成所有这些逻辑:
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.onAll(function(name, data) {
console.log('Broadcasted event:', name, data);
});
events.broadcast('foo', data1);
events.broadcast('bar', data2);
这样,您将只使用events.broadcast
来广播您希望从onAll
侦听器了解的事件。
$rootScope$广播将自动"广播"该变量/对象的结果。当你需要在另一端,是监听器-$rootScope$上。看起来是这样的:
//broadcast
$rootScope.$broadcast('variableName');
//listener
$rootScope.$on('variableName', function(event, args){
//do whatever you want in here when 'variableName' is broadcasted
});