Angularjs: как ввести контроллер в модуль после инициализации DOM?

Question

Я ввожу новый DOM с контроллером:

app.controller('cart', function ($scope, $http) {
    $scope.content = {
        label: "hello, world!",
    };
});

var $html = '<div ng-controller="cart"></div>';
var $root = $('[ng-app]');

angular.element($root).injector().invoke(function ($compile) {
    var $scope = angular.element($root).scope();
    $root.append($compile($html)($scope));
    // Finally, refresh the watch expressions in the new element
    $scope.$apply();
});

В $root.append($compile($html)($scope)); возникает ошибка.Я даже вижу, что контроллер зарегистрирован на app, когда я отлаживаю его в Chrome.

Что может пойти не так с кодом?

---

РЕДАКТИРОВАТЬ

Так что, если я положу так:

var app = angular.module('app', ['ngSanitize']);

app.controller('base', function ($scope, $http) {
    ....
});

app.controller('cart', function ($scope, $http) {
    ....
});

в том же файле, это работает.В моем случае у меня есть 2 отдельных файла js.Один файл содержит:

var app = angular.module('app', ['ngSanitize']);

app.controller('base', function ($scope, $http) {
    ....
});

Файл выше загружается первым.Тогда второй файл имеет:

app.controller('cart', function ($scope, $http) {
    ....
});

var $html = '<div ng-controller="cart"></div>';
var $root = $('[ng-app]');

angular.element($root).injector().invoke(function ($compile) {
    var $scope = angular.element($root).scope();
    $root.append($compile($html)($scope));
    // Finally, refresh the watch expressions in the new element
    $scope.$apply();
});

и загружается позже после завершения первого файла.Таким образом, вопрос должен быть изменен на:

Как ввести новый контроллер в модуль после инициализации модуля?

Answer 1

Я нашел это в интернете. Он показывает, как вводить контроллеры, директивы, фильтры и т. Д. После загрузки Angularjs. Вызовите app.config() после назначения модуля.

    var app = angular.module('app', ['ngSanitize']);

    app.config(
        function( $controllerProvider, $provide, $compileProvider ) {
            // Since the "shorthand" methods for component
            // definitions are no longer valid, we can just
            // override them to use the providers for post-
            // bootstrap loading.
            console.log( "Config method executed." );
            // Let's keep the older references.
            app._controller = app.controller;
            app._service = app.service;
            app._factory = app.factory;
            app._value = app.value;
            app._directive = app.directive;
            // Provider-based controller.
            app.controller = function( name, constructor ) {
                $controllerProvider.register( name, constructor );
                return( this );
            };
            // Provider-based service.
            app.service = function( name, constructor ) {
                $provide.service( name, constructor );
                return( this );
            };
            // Provider-based factory.
            app.factory = function( name, factory ) {
                $provide.factory( name, factory );
                return( this );
            };
            // Provider-based value.
            app.value = function( name, value ) {
                $provide.value( name, value );
                return( this );
            };
            // Provider-based directive.
            app.directive = function( name, factory ) {
                $compileProvider.directive( name, factory );
                return( this );
            };
            // NOTE: You can do the same thing with the "filter"
            // and the "$filterProvider"; but, I don't really use
            // custom filters.
        }
    );

затем выполните app.controller('base', function ($scope, $http) { .... или определите фильтр / директивы / и т. Д. после этого сработает.

Вот ссылка от Ben Nadel.