我有一个现有页面,我需要将一个带有可以动态加载的控制器的 angular 应用程序放入其中。
这是一个片段,它根据 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
. 如果我正确理解了 bootstrap,它返回的注入器应该知道该Foo
module,对吗?
相反,如果我使用 制作了一个新的注入器angular.injector(['ng', 'Foo'])
,它似乎可以工作,但它会创建一个新的注入器,该注入器$rootScope
不再与Foo
引导module的元素的作用域相同。
我是使用正确的功能来做到这一点还是我遗漏了什么?我知道这不是 Angular 的方式,但我需要将使用 Angular 的新组件添加到不使用 Angular 的旧页面,而且我不知道引导module时可能需要的所有组件。
更新:
我已经更新了小提琴,以表明我需要能够在不确定的时间点向页面添加多个控制器。