角模块在全球传播：事件总线或调解模式/服务 [英] global communication in angular module: event bus or mediator pattern/service

问题描述

到目前为止，我已经看到了这个问题的许多解决方案。最简单的一个，当然，到 $发出在 $ rootScope 事件作为一个事件总线例如（<一href=\"https://github.com/btilford/anti-patterns/blob/master/angular/Angular.md\">https://github.com/btilford/anti-patterns/blob/master/angular/Angular.md ）

So far I have seen many solutions of the problem. The simplest one is, of course, to $emit an event in $rootScope as an event bus e.g. ( 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');
      });
    }
  }
});

和另外一个是调解或发布订阅功能/一个封闭的范围申报服务例如（<一href=\"http://stackoverflow.com/questions/22550079/communicating-between-a-multiple-controllers-and-a-directive\">Communicating多重控制器和指令之间）。

and another one is to declare a service with a mediator or pubsub functionality / an enclosed scope e.g. ( Communicating between a Multiple Controllers and a directive. )

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

问题是：

• 有没有点使用的角度应用第二个？


• ，什么是优点和每一个这些的利弊比较彼此？

推荐答案

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

Creating your own implementation of event emitter is counter-productive when writing an AngularJS application. Angular already provides all tools needed for event-based communication.

• 使用 $发出在 $ rootScope 工作得很好全球服务间通信，不会真的有什么缺点。

视图组件（指令，控制器）之间的
• 使用 $广播上一个自然的范围（一个是绑定到DOM的一部分）提供范围的通信。


• 在 $ rootScope 使用 $广播带来两个previous分在一起（它提供了一个完全的全球通信平台）。的这是任何基于AngularJS库基本上都采用了那里的解决方案。的

• Using $emit on $rootScope works nicely for global inter-service communication and doesn't really have any drawbacks.
• Using $broadcast on a natural scope (one that is bound to a part of your DOM) provides scoped communication between view components (directives, controllers).
• Using $broadcast on $rootScope brings the two previous points together (it provides a completely global communication platform). This is the solution used basically by any AngularJS-based library out there.

和

• 如果你担心在previous选项的性能和你真的想你单独的事件发射器，你可以很容易地通过创建一个孤立的范围（创建一个 $ rootScope。$新的（真正的）），并使用 $广播就可以了。 （然后你可以把它包装成一个服务，你希望的任何地方注入它。）

• If you're worried about performance in the previous option and you really want your separate event emitter, you can easily create one by creating an isolated scope ($rootScope.$new(true)) and using $broadcast on it. (You can then wrap it into a service and inject it anywhere you want.)

最后一个选项创建发射器集成到角（在你的问题中提供的实施将至少需要包装在 $所有侦听器调用应用全面的事件（）正确地整合），可被额外用于数据变化的观察中，如果适合特定的用例。

The last option creates a full-fledged event emitter integrated into Angular (the implementation provided in your question would at least need to wrap all listener calls in $apply() to integrate properly) that can be additionally used for data change observation, if that fits a particular use-case.

但是，除非你的应用程序真的是堆积如山，或者你真的偏执事件名称冲突，前三个选项应该足够了就好了。

However, unless your application is really humongous, or you're really paranoid about event name collisions, the first three options should suffice just fine.

的我不会进入你的组件之间的通信的其他方式的细节。一般来说，当情况使用范围，控制器的直接互动，或通过通信DOM节点属性，你应该知道它的数据共享要求。的

这篇关于角模块在全球传播：事件总线或调解模式/服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！