如何拦截 angular.js 中的所有 $rootScope.$broadcast 事件

Question

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

我的问题是，如何收听 $broadcast 在 $rootScope 上编辑的所有事件？是否有某种事件拦截器？

Answer 1

$rootScope.$broadcast 自动 '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 2

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

相反，您应该创建一个处理事件发射和处理的服务，以便您可以从那里执行所有这些逻辑：

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 侦听器知道的事件。

Answer 3

我正在寻找相同问题的解决方案。在 https://github.com/angular/angular.js/issues/6043 遇到了 caitp 的解决方案，我相信这也是您正在寻找的。

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

我将从 link 中复制代码以供后代使用，并稍作调整（以与 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/$提供

如何拦截 angular.js 中的所有 $rootScope.$broadcast 事件

How to intercept all $rootScope.$broadcast events in angular.js

events

angularjs