0

我定义了 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';
}]);
4

3 回答 3

0

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

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

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/

于 2014-11-21T18:16:58.947 回答
0 
myApp.controller('ParentController', ['$scope', function($scope) { 
}]);


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

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

AngularJS中控制器之间通信的正确方法是什么？

这减少了应用程序各部分之间的耦合。

于 2013-10-18T03:09:40.483 回答
0

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

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如果/当您稍后缩小脚本时，上面的内容很可能会出现问题，因此请注意它的使用位置和方式。

于 2014-01-07T07:45:24.090 回答