angularJS $事件处理程序的触发顺序 [英] angularJS $on event handler trigger order

问题描述

我想知道两件事，在angularJS事件处理的情况下。

I was wondering two things, in the context of angularJS event handling.

1. 如何界定在听同一事件处理程序被触发的顺序？


2. 这是个不好的设计的征兆，如果你开始怀疑这件事？

在对角 $上$广播和$ EMIT 以及本地阅读文档< A HREF =htt​​p://www.w3.org/TR/DOM-Level-3-Events/#event-flow> DOM事件流我想我明白其中为了事件处理程序将在触发不同的范围。问题是，当多个处理程序在同一范围内收听来自不同的地方（$ rootScope为例）（控制器VS服务为例）。

After reading documentation on angular $on, $broadcast and $emit as well as native DOM event flow I think I understand in which order event handlers will be trigger in different scopes. The problem is when several handlers listen in the same scope ($rootScope for example) from various places (Controllers vs Services for example).

要说明我已经把到$ rootScope http://jsfiddle.net/一个控制器和两个服务，所有通信时的jsfiddle问题Z84tX /

To illustrate the problem I have put together a jsfiddle with one controller and two services, all communicating through $rootScope http://jsfiddle.net/Z84tX/

感谢

推荐答案

非常好的问题。

的事件处理程序的初始化的顺序执行。

我真的没有想过这之前，因为我从来没有处理程序需要知道哪一个先运行，而是由你的外观拨弄我可以看到，处理器被称为在它们被初始化的顺序相同。

I haven't really thought about this before, because my handlers never needed to know which one run first, but by the look of you fiddle I can see that the handlers are called in the same order in which they are initialized.

在你摆弄你有一个控制器 controllerA 这取决于两个服务， ServiceA 和 ServiceB ：

In you fiddle you have a controller controllerA which depends on two services, ServiceA and ServiceB:

myModule
  .controller('ControllerA', 
    [
      '$scope', 
      '$rootScope', 
      'ServiceA', 
      'ServiceB', 
      function($scope, $rootScope, ServiceA, ServiceB) {...}
    ]
  );

这两种服务和控制器定义一个事件侦听器。

Both services and the controller define an event listener.

现在，所有的依赖需要注入，这意味着这两个服务将被注入到控制器之前被初始化之前得到解决。因此，在服务定义的操作将被首先调用，因为服务工厂控制器之前初始化。

Now, all dependencies need to be resolved before being injected, which means that both services will be initialized before being injected into the controller. Thus, handlers defined in the services will be called first, because service factories are initialized before controller.

然后，你也可以观察到，为了他们注入的服务被初始化。因此， ServiceA 之前 ServiceB ，因为它们是按照这个顺序到控制器注入初始化。如果更改控制器内的签名它们的顺序，你会看到他们的动初始化顺序也发生了变化（ ServiceB 到来之前 ServiceA ）。

Then, you may also observe that the services are initialized in order they are injected. So ServiceA is initialized before ServiceB because they are injected in that order into the controller. If you changed their order inside the controller signature you'll see that their initilization order is also changed (ServiceB comes before ServiceA).

因此​​，服务初始化后，控制器被初始化为好，有了它，在事件处理程序中定义的。

So, after the services are initialized, the controller gets initialized as well, and with it, the event handler defined within.

所以，最终的结果是，在$播出，该处理器将在本顺序执行： ServiceA 处理程序， ServiceB 处理程序， ControllerA 处理程序。

So, the end result is, on $broadcast, the handlers will be executed in this order: ServiceA handler, ServiceB handler, ControllerA handler.

这篇关于angularJS $事件处理程序的触发顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！