Question

我定义了2个控制器：

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) { 
}]);

myApp.controller('ChildController', ['$scope', '$injector',  function($scope, $injector) { 

$injector.invoke(ParentController, this, {$scope: $scope}); 
}]);

这给出：ReferenceError：未定义ParentController。

此代码仅在ParentController定义为：

时有效

function ParentController($scope) {}

我正在尝试在子进程中注入父进程，然后我可以继承父进程中定义的公共函数。

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) {
    $scope.name = 'ParentName'; 
    $scope.Type = 'ParentType'; 
    $scope.clickme = function() { 
        alert('This is parent controller "ParentController" calling'); 
    } 
}]);

myApp.controller('ChildController', ['$scope', '$injector', '$ParentController',  function($scope, $injector, $ParentController) { 
    $injector.invoke(ParentController, this, {$scope: $scope}); 
    $scope.name = 'Child';
}]);

Answer 1

myApp.controller('ParentController', ['$scope', function($scope) { 
}]);


myApp.controller('ChildController', ['$scope', 'ParentController',  function($scope, ParentController) {
    // ok now you have ParentController
}]);

但我认为您需要使用服务在控制器之间共享数据/功能或使用PubSub模型：

What's the correct way to communicate between controllers in AngularJS?

这会减少应用各部分之间的耦合。

Answer 2

这是实现您所追求目标的基本解决方法：

var myApp = angular.module('nestedControllersModule',[]); 
myApp.factory('ParentControllerFactory', function () {
    function ParentControllerFactory($scope) {
        $scope.name = 'ParentName'; 
        $scope.Type = 'ParentType'; 
        $scope.clickme = function() { 
            alert('This is parent controller "ParentController" calling'); 
        }
    }
    return (ParentControllerFactory);
})
.controller('ParentController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
    $injector.invoke(ParentControllerFactory, this, {
        $scope: $scope
    });
}]) 
.controller('ChildController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
    $injector.invoke(ParentControllerFactory, this, {
        $scope: $scope
    });
}]);

我说解决方法，因为正如前面提到的那样，正确地实施服务来管理任何共性可能是值得的（或者更好的是，将共性划分为指令，例如clickme是一个很好的候选者）

...还要注意$injector.invoke(ParentControllerFactory如上所述，如果/稍后缩小你的脚本，那么很可能会放弃你的合适，所以要小心它在何处以及如何使用。

Answer 3

考虑使用$ controller服务来使用Mixin模式。

在您的示例中，您将使用$ controller服务替换$ injector服务：

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) {
    $scope.name = 'ParentName'; 
    $scope.Type = 'ParentType'; 
    $scope.clickme = function() { 
        alert('This is parent controller "ParentController" calling'); 
    } 
}]);

myApp.controller('ChildController', ['$scope', '$controller', '$ParentController',  function($scope, $controller, $ParentController) {
    $controller('ParentController',{$scope: $scope})
    $scope.name = 'Child';
}]);

这是使用$ controller服务的一个很好的概述： http://vadimpopa.com/split-large-angularjs-controllers-using-the-mixin-pattern/

AngularJS $ injector.invoke - 未定义ParentController

3 个答案: