AngularJS:在控制器中动态注入服务或指令(不需要在angular.module's的方括号中预先包含它们

AngularJS: Inject service or directives dynamically in controller (without including them in angular.module's square brackets beforehand, see example)

本文关键字：包含它 module 方括号 不需要 注入 动态 控制器 服务 AngularJS 指令 angular      更新时间：2023-09-26

我的AngularJS应用中有一些带有动态选项卡的页面。一个例子是一个帐户设置页面，它有一堆标签，如Profile, Billing, Password等。这些选项卡是根据用户启用的模块动态地添加的。我使用ngRoute在ng-view中加载选项卡内容。

请看下面的例子:

http://plnkr.co/edit/NIvMRw65VHMxZjTluKxQ?p =

预览

代码不工作，因为我没有包括moduleOne和moduleTwo在模块列表中，只有['ngRoute']

下面是一个工作版本:

http://run.plnkr.co/8xIuvMIZSBYuITyN/working.html

在working.html中，我包含了所有模块:

     angular.module('ngApp', ['ngRoute', 'moduleOne', 'moduleTwo']);

，所以它可以工作!

所以我的问题是:

我如何在one.html和two.html分别包括moduleOne和moduleTwo ?

因为我不想像这样包含所有的模块

['ngRoute', 'moduleOne', 'moduleTwo', ...unknown modules]

我只是想包含

['ngRoute']

，并加载模板中的其余模块，以便在需要时加载它们。

我该怎么做?

注:如果你能纠正我的plnkr或张贴一些代码，那将是最有帮助的!

如果不使用构建工具来允许导入，一种选择是将内容放在窗口的名称空间中。当包含脚本文件时，它们将自己添加到模块数组中。然后，这个数组被用作主应用的依赖项。

//in each of the deps:
window.modules = window.modules || [];
window.modules.push('moduleOne');
// another dep:
window.modules = window.modules || [];
window.modules.push('moduleTwo');
//in the main script loading the app
window.modules = window.modules || [];
window.modules.push('ngRoute');
var app = angular.module('ngApp', window.modules);

http://plnkr.co/edit/zyae1Y08Pe3WY3zbcutH?p =

预览

这样做的缺点是它弄脏了window。您可能会有一些其他脚本也取决于window.modules混淆您的东西。你可以更好地命名它，但使用webpack、browserify、systemjs或其他…可以让你避免这一切

经过大量的搜索，我能够使它工作。诀窍是使用ocLazyLoad库。

这是工作的plunk:

http://goo.gl/wPeCAF

让我知道你们的想法?

相关文章：