无法从角度检索注射器

Question

我的这个应用有两个模块：

angular.module('components', []).directive('foo', function () { return {};});
angular.module('gaad', ['components']);

有一堆与这个模块相关的指令，我在这里不包括在内。 该应用程序工作正常。但是，当我尝试检索模块 gaad 的注入器时：

var injector = angular.injector(['gaad', 'components']); //called after 'gaad' module initialization

抛出错误：

Uncaught Error: Unknown provider: $compileProvider from components 

应用程序现在相当大，我不知道应该去哪里寻找错误。 所以我的问题是：我的问题可能是什么原因？

编辑： 我能够复制我的问题：http://jsfiddle.net/selbh/ehmnt/11/

Answer 1

在回答问题之前，我们需要注意每个应用程序只有一个注入器实例，而不是每个模块。从这个意义上说，不可能为每个模块检索一个注入器。当然，如果我们采用顶层模块，它代表了整个应用程序。从这个意义上说，应用程序和顶级模块似乎是等价的。这似乎是一个微妙的区别，但为了全面和正确地回答这个问题，理解这一点很重要。

接下来，据我所知，您希望检索$injector，而不是创建它的新实例。问题是angular.injector 将为指定为参数的模块（应用程序）创建一个新的$injector 实例。这里必须明确指定主要的 AngularJS 模块 (ng)。所以，在这个代码示例中：

var injector = angular.injector(['gaad', 'components']);

您试图从“gaad”和“components”模块中定义的组件创建一个新的注入器，显然$compileProvider 没有在您的自定义模块中定义。 将ng 模块添加到列表中将通过创建新的注入器来“解决”问题——这可能是您不希望发生的事情。

要实际检索与正在运行的应用程序关联的注入器实例，我们可以使用 2 种方法：

• 在 AngularJS JavaScript 中，最简单的解决方案就是注入 $injector 实例：http://docs.angularjs.org/api/angular.injector
• 来自 AngularJS 世界之外 - 调用 angular.element([DOM element]).injector() 其中 [DOM 元素] 是定义了 ng-app 的圆顶元素（或此元素的任何子元素）。更多信息在这里：http://docs.angularjs.org/api/angular.element

这里是 jsFiddle 展示了注入器检索的 2 种方法：http://jsfiddle.net/xaQzb/

还请注意，在单元测试之外，直接使用$injector 并不是很常见的场景。从 AngularJS 世界之外检索 AngularJS 服务可能是有用的想法。更多信息在这里：Call Angular JS from legacy code。

Answer 2

看来您还需要在注入器中包含 ng。

var injector = angular.injector(['ng', 'b', 'a']);

发件人：AngularJS: injector

ng 模块必须显式添加。

Answer 3

问题在于 Angular 代码的执行流程。要集成 @pkozlowski.opensource 的答案和相关 cmets，请注意 $injector 属性在模块代码执行后可用于 DOM 元素，以便在您访问该属性时（就像您尝试 console.log 它时一样）该属性仍将是undefined。

您可以通过简单地将日志记录功能的执行设置为 0 超时来解决此问题（即，不需要以毫秒为单位的显式延迟）。这个 hack 之所以有效，是因为当堆栈为空时，即 Angular 的引导完成并且 $injector 属性可用于 DOM 元素时，将执行日志记录功能。

Angular 术语中的另一个（也许更好）解决方案是将您的$injector 访问代码包含在run block 中（另请参见related API）。然后，$injector 可以作为普通服务轻松注入到初始化函数中。这是可行的，因为当所有引导终止时，运行块会排队并异步执行。

您可以在下面找到两个小提琴，每个解决方案一个。

0 Timeout jsFiddle

Run block jsFiddle

编辑

此外，通常不需要显式加载ng 模块。在正常情况下，ng 模型已经自动加载，除非您想手动引导 Angular 的代码。答案之一中引用的文档（隐含地，不幸的是）指的是 Angular 的手动引导过程，当您必须手动创建注入器并告诉它您要加载哪些模块时