将控制器动态添加到角度应用程序

Question

我在主干 js 应用程序中使用 angular js。我有一个控制器（比如 controller1），它从一个主干视图（比如 view1）添加到 Angular 应用程序中。现在我添加了另一个控制器（比如 controller2），它位于另一个主干视图（比如 view2）中。从 view2 我将 controller2 添加到 Angular 应用程序。但是这里 controller2 的 构造函数没有被调用。

视图1

bootstarpAngular: function(){

        var app = angular.module('APP', []);
        app.controller('Controller1', ['$scope', loadController1]);

        angular.element(document).ready(function() {
                this.angular = angular.bootstrap(document, ['APP']);
        });
    }

控制器1

function loadController1($scope){
   console.log("Controller1");
}

view2

addController2: function(){

            var app = angular.module('APP');
            app.controller('Controller2', ['$scope', loadController2]);
        }

控制器2

function loadController2($scope){
   console.log("Controller2");
}

这里，控制台日志只打印 controller1 不打印 controller2。

我希望两个控制器都接到电话。我做错了吗，或者有更好的方法可以满足这个要求。

Answer 1

您只能在引导 Angular 应用程序之前添加具有 controller 函数的控制器。

如果您确实需要延迟加载控制器，您可以在引导之前执行：

app.config(function($controllerProvider) {
  // globalCtrl must be a global function
  globalCtrl = $controllerProvider.register;
});

在您的新模块中：

globalCtrl('Controller2', Controller2Fn);

通常有更好的解决方案来实现这一点，但我不知道你的具体情况。