动态加载AngularJS控制器
动态加载AngularJS控制器
我有一个已存在的页面，我需要在其中插入一个可以动态加载的带有控制器的angular应用程序。
以下是我根据API和一些相关问题找到的最佳猜测的实现代码片段：
// 创建模块Foo
angular.module('Foo', []);
// 启动Foo
var injector = angular.bootstrap($('body'), ['Foo']);
// 在模块Foo中创建控制器Ctrl
angular.module('Foo').controller('Ctrl', function() { });
// 加载使用控制器Ctrl的元素
var ctrl = $('').appendTo('body');
// 编译新元素
injector.invoke(function($compile, $rootScope) {
// 这里的链接器会抛出异常
$compile(ctrl)($rootScope);
});
注意，这只是实际事件链的简化版本，上述代码之间还有各种异步调用和用户输入。
当我尝试运行上述代码时，由$compile返回的链接器会抛出异常：Argument 'Ctrl' is not a function, got undefined。如果我正确理解了bootstrap，它返回的注入器应该知道关于Foo模块的信息，对吗？
如果我使用angular.injector(['ng', 'Foo'])创建一个新的注入器，似乎可以工作，但它会创建一个新的$rootScope，它不再是与引导Foo模块的元素相同的作用域。
我是否使用了正确的功能来实现这个需求，或者我漏掉了什么？我知道这并不是按照Angular的方式来做，但我需要向旧页面添加使用Angular的新组件，而且在引导模块时我不知道可能需要哪些组件。
更新：
我已经更新了fiddle，以展示我需要能够在不确定的时间点向页面添加多个控制器。