Question

我有一个简单的控制器可以正常工作：

app.controller('IndexController', ['$scope', obj.indexPage]);

var obj = {};
obj.indexPage = function ($scope) { // do controller stuff };

我还有一个事件函数，我想用它来加载/创建/实例化这个控制器：

// some callback, doesn't really matter
app.onPage('index', function () {

    // load and run controller logic in here
    app.controller('IndexController', ['$scope', obj.indexPage]);

}, obj);

存在一些问题，例如Argument 'IndexController' is not a function, got undefined

有什么想法吗？

我的解决方案：

app.controller('IndexController', ['$scope', function ($scope) {
    var obj = {};
    obj.indexPage = function (data) { 

        // do controller stuff 

    };

    app.onPage('index', function (data) {
        obj.indexPage(data);
    }, obj);
});

Answer 1

由于角度模块系统的工作原理，您不能像这样异步地实例化控制器。但是，您可以使用$controller服务即时创建控制器。以下相同的技术通常用于单元测试。

例如：

angular.module('app', [])

.controller('MyCtrl', function($rootScope, CtrlFactory){
    var dynamicCtrl = CtrlFactory.create({$scope: $rootScope.$new()});
    console.log(dynamicCtrl.method()); //-> 123
})

.factory('CtrlFactory', function($controller) { 
  return {
      create: function(locals) {
          return $controller(
              //this is the constructor of the new controller
              function($scope){
                  console.log('Dynamic controller', $scope);
                  this.method = function() { return 123; };
              }, 
              //these are the injected deps
              locals 
          );
      }
  };
})

有关单元测试上下文中的一些示例用法，请参阅：https://docs.angularjs.org/guide/controller。

我补充一点，您可能想重新考虑一下这样做的原因 - 我不能说我已经看到$controller使用了外部测试。

Answer 2

app.onPage('index', function () {

    app.controller('IndexController', obj.indexPage); // this would load the controller to the module
    $controller('IndexController', { $scope: $scope }); // This would instantiate the controller, NOTE: $controller service should be injected

}, obj);

如何动态创建/实例化AngularJs控制器？

2 个答案: