如何在運行中創建/實例化AngularJs控制器？

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