问题描述
到目前为止,我已经看到了这个问题的许多解决方案。最简单的一个,当然,到 $发出
在 $ rootScope
事件作为一个事件总线例如(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');
});
}
}
});
和另外一个是调解或发布订阅功能/一个封闭的范围申报服务例如(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节点属性,你应该知道它的数据共享要求。的
这篇关于角模块在全球传播:事件总线或调解模式/服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!