angularJS $on 事件处理程序触发顺序

Question

在 AngularJS 事件处理的上下文中，我想知道两件事。

1. 如何定义监听同一事件的处理程序的触发顺序？
2. 如果您开始对此感到疑惑，这是否表明设计不佳？

阅读有关 Angular 的文档后 $on, $broadcast and $emit以及本地DOM event flow我想我了解事件处理程序将在不同范围内触发的顺序。问题是当多个处理程序从不同位置(例如 Controller 与服务)在同一范围(例如 $rootScope)中监听时。

为了说明这个问题，我将一个 jsfiddle 与一个 Controller 和两个服务放在一起，所有这些都通过 $rootScope http://jsfiddle.net/Z84tX/ 进行通信。

谢谢

Answer 1

非常好的问题。

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

我之前并没有真正考虑过这一点，因为我的处理程序从来不需要知道哪一个先运行，但是通过你的 fiddle 的外观，我可以看到处理程序的调用顺序与它们初始化的顺序相同。

在你的 fiddle 中，你有一个 Controller controllerA，它依赖于两个服务，ServiceA和ServiceB:

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

服务和 Controller 都定义了事件监听器。

现在，所有依赖项都需要在注入(inject)之前解决，这意味着这两个服务都将在注入(inject) Controller 之前进行初始化。因此，服务中定义的处理程序将首先被调用，因为服务工厂是在 Controller 之前初始化的。

然后，您还可能会观察到服务按照注入(inject)的顺序进行初始化。因此 ServiceA 在 ServiceB 之前初始化，因为它们按该顺序注入(inject)到 Controller 中。如果您在 Controller 签名中更改了它们的顺序，您将看到它们的初始化顺序也发生了更改(ServiceB 位于 ServiceA 之前)。

因此，在服务初始化后， Controller 也会初始化，其中定义的事件处理程序也会随之初始化。

因此，最终结果是，在 $broadcast 上，处理程序将按以下顺序执行:ServiceA 处理程序、ServiceB 处理程序、ControllerA 处理程序。