动态加载AngularJS控制器

Question

动态加载AngularJS控制器

我有一个现有的页面，我需要删除一个带有可以动态加载的控制器的角度应用程序。

这是一个片段，它根据API和我发现的一些相关问题实现了我应该如何完成的最佳猜测：

// Make module Foo

angular.module('Foo', []);

// Bootstrap Foo

var injector = angular.bootstrap($('body'), ['Foo']);

// Make controller Ctrl in module Foo

angular.module('Foo').controller('Ctrl', function() { });

// Load an element that uses controller Ctrl

var ctrl = $('<div ng-controller="Ctrl">').appendTo('body');

// compile the new element

injector.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或其他此类库加载它们。