角度模块中的全局通信：事件总线或中介器模式/服务

Question

到目前为止，我已经看到了许多解决问题的方法。当然，最简单的方法是$emit将事件$rootScope作为事件总线使用，例如（https://github.com/btilford/anti-
patterns/blob/master/angular/Angular.md
）

angular.module('myModule').directive('directiveA', function($rootScope) {
  return {
    link : function($scope, $element) {
      $element.on('click', function(event) {
        $rootScope.$emit('directiveA:clicked', event);
      });
    }
  }
});
angular.module('myModule').directive('directiveB', function() {
  return {
    link : function($scope, $element) {
      $rootScope.on('directiveA:clicked', function(event) {
        console.log('received click event from directiveA');
      });
    }
  }
});






module.factory('MessageService',
  function() {
    var MessageService = {};

    var listeners = {};
    var count = 0;
    MessageService.registerListener = function(listener) {
      listeners[count] = listener;
      count++;

      return (function(currentCount) {
        return function() {
          delete listeners[currentCount];
        }
      })(count);
    }

    MessageService.broadcastMessage = function(message) {
      var keys = Object.keys(listeners);

      for (var i = 0; i < keys.length; i++) {
        listeners[keys[i]](message);
      }
    }

    return MessageService;
  }
);

问题是：

• 在角度应用中使用第二个有什么意义吗？
• 彼此之间的优缺点是什么？

Answer 1

在编写AngularJS应用程序时，创建自己的事件发射器实现会适得其反。Angular已经提供了基于事件的通信所需的所有工具。

• 使用$emiton $rootScope可以很好地进行全局服务间通信，并且实际上没有任何缺点。
• 使用$broadcast在自然范围（一个绑定到您的DOM的一部分）提供了视图组件（指令，控制器）之间范围的通信。
• 使用$broadcaston可以$rootScope将前面的两点结合在一起（它提供了一个完全全球化的交流平台）。 这是基本上任何基于AngularJS的库都使用的解决方案。

和

• 如果您担心上一个选项的性能，并且确实希望使用单独的事件发射器，则可以通过创建一个独立的作用域（$rootScope.$new(true)）并$broadcast在其上使用轻松地创建事件发射器。（然后，您可以将其包装到服务中，然后将其注入所需的任何位置。）

最后一个选项创建一个集成到Angular中的成熟事件发射器（问题中提供的实现至少需要包装所有侦听器调用$apply()以正确集成），如果适合特定用途，还可以用于数据更改观察-
案件。

但是，除非您的应用程序真的很笨拙，或者您对事件名称冲突真的很偏执，否则前三个选项就足够了。

我不会详细介绍组件之间的其他通信方式。 一般而言，当情况要求使用范围共享数据，控制器直接交互或通过DOM Node属性进行通信时，您应该知道这一点。