Mam istniejącą stronę, na której muszę upuścić aplikację kątową z kontrolerami, które można ładować dynamicznie.

Oto fragment, który implementuje moje najlepsze przypuszczenie, w jaki sposób należy to zrobić w oparciu o interfejs API i kilka powiązanych pytań, które znalazłem:

// 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. Należy zauważyć, że jest to uproszczenie rzeczywistego łańcucha zdarzeń, istnieją różne asynchroniczne wywołania i dane wejściowe między liniami powyżej.

Kiedy próbuję uruchomić powyższy kod, linker zwracany przez $ compile zgłasza:Argument 'Ctrl' is not a function, got undefined. Jeśli poprawnie zrozumiałem bootstrap, wtryskiwacz, który powróci powinien wiedzieć oFoo moduł, prawda?

Jeśli zamiast tego użyję nowego wtryskiwaczaangular.injector(['ng', 'Foo']), wydaje się działać, ale tworzy nowe$rootScope który nie jest już tym samym zakresem co element, w którymFoo moduł został załadowany.

Czy korzystam z odpowiedniej funkcji, aby to zrobić, czy jest coś, co przegapiłem? Wiem, że to nie robi tego w sposób Angular, ale muszę dodać nowe komponenty, które używają Angular do starych stron, które nie, i nie znam wszystkich komponentów, które mogą być potrzebne, gdy ładuję moduł.

AKTUALIZACJA:

Zaktualizowałemskrzypce pokazać, że muszę mieć możliwość dodania wielu kontrolerów do strony w nieokreślonych punktach w czasie.