动态加载AngularJS控制器

Question

动态加载AngularJS控制器我有一个现有的页面，我需要删除一个带有可以动态加载的控制器的角度应用程序。这是一个片段，它根据API和我发现的一些相关问题实现了我应该如何完成的最佳猜测：// Make module Fooangular.module('Foo', []);// Bootstrap Foovar injector = angular.bootstrap($('body'), ['Foo']);// Make controller Ctrl in module Fooangular.module('Foo').controller('Ctrl', function() { });// Load an element that uses controller Ctrlvar ctrl = $('<div ng-controller="Ctrl">').appendTo('body');// compile the new elementinjector.invoke(function($compile, $rootScope) {    // the linker here throws the exception    $compile(ctrl)($rootScope);});JSFiddle。请注意，这是实际事件链的简化，上面的行之间有各种异步调用和用户输入。当我尝试运行上面的代码时，$ compile返回的链接器抛出：Argument 'Ctrl' is not a function, got undefined。如果我正确理解了引导程序，它返回的注入器应该知道Foo模块，对吧？相反，如果我使用一个新的注入器angular.injector(['ng', 'Foo'])，它似乎工作，但它创建一个新的$rootScope，不再与Foo模块被引导的元素相同的范围。我使用正确的功能来做这件事还是我错过了什么？我知道这不是以Angular方式进行的，但是我需要添加使用Angular的新组件到没有的旧页面，而且我不知道在引导模块时可能需要的所有组件。

Answer 1

我建议看看ocLazyLoad库，它在运行时注册模块（或现有模块上的控制器，服务等），并使用requireJs或其他此类库加载它们。