Динамическая загрузка 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, на старые страницы, которые этого не делают, и я не знаю всех компонентов, которые могут понадобиться при загрузке модуля.

ОБНОВИТЬ:

Я обновилиграть на скрипке чтобы показать, что мне нужно иметь возможность добавлять несколько контроллеров на страницу в неопределенные моменты времени.

Ответы на вопрос(8)

Ваш ответ на вопрос