Angularjs：如何在 DOM 初始化后将控制器注入模块？答案

【问题标题】：Angularjs: How To Inject Controller Into Module After DOM Is Initialized?Angularjs：如何在 DOM 初始化后将控制器注入模块？
【发布时间】：2019-06-10 05:04:59
【问题描述】：

我正在用控制器注入新的 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)); 中发生错误。当我使用 Chrome 进行调试时，我什至可以看到控制器已在 app 上注册。

代码有什么问题？

编辑

所以如果我这样说：

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();
});

并在第一个文件完成后稍后加载。所以问题应该改成：

模块初始化后如何给模块注入新的控制器？

【问题讨论】：

代码适用于这个DEMO on PLNKR。
两个控制器都定义在不同的文件中。这会导致错误。

标签： javascript jquery angularjs

【解决方案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 的 link。

【讨论】：