Динамическая загрузка 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 throws:Argument 'Ctrl' is not a function, got undefined
, Если я правильно понял загрузчик, то возвращаемый им инжектор должен знать оFoo
модуль, верно?
Если вместо этого я сделаю новый инжектор, используяangular.injector(['ng', 'Foo'])
, кажется, работает, но это создает новый$rootScope
который больше не является той же областью, что и элемент, гдеFoo
модуль был загружен.
Использую ли я нужную функциональность для этого или я что-то упустил? Я знаю, что это не делает это с помощью Angular, но мне нужно добавить новые компоненты, которые используют Angular, на старые страницы, которые этого не делают, и я не знаю всех компонентов, которые могут понадобиться при загрузке модуля.
ОБНОВИТЬ:
Я обновилиграть на скрипке чтобы показать, что мне нужно иметь возможность добавлять несколько контроллеров на страницу в неопределенные моменты времени.