Question

假设我有两个控制器的视图，一个包含另一个。外部控制器是静态的，但我需要根据外部的范围变量设置内部控制器。范围变量将是内部控制器的名称作为字符串（例如。'InnerCtrl'）。

以下是观点：

<div ng-app='app' ng-controller='OuterCtrl'>
    <div ng-controller='dynamicCtrl'>
        {{result}}
    </div>
</div>

这是尚未正确的模块：

angular.module('app', [])

    .controller('OuterCtrl', ['$scope', 
        function($scope) {

            // Instead of hard coding the controller here,
            // how do I resolve the string 'InnerCtrl' to the 
            // controller function defined below, so it can be
            // assigned to this dynamicCtrl property?
            $scope.dynamicCtrl = function($scope) {
                $scope.result = 'not working yet';
            };

            //eg:
            //$scope.dynamicCtrl = resolveCtrl('InnerCtrl');                                               
        }
    ])

    .controller('InnerCtrl', ['$scope', 'service',
        function($scope, service) {
            $scope.result = service.getMessage();
        }
    ])

   .factory('service', function() {
       return {
           getMessage:  function() { return 'working!'; }
       };
    });

我尝试使用$ injector服务：

$scope.dynamicCtrl = $injector.get('InnerCtrl');

但是这给出了：“未知的提供者：InnerCtrlProvider＆lt; - InnerCtrl”

我还考虑过使用$ controller服务：

$scope.dynamicCtrl = $controller('InnerCtrl', {} /* don't want to hard code dependencies */);

但这给了我“未知提供者：$ scopeProvider＆lt; - $ scope”。我知道我可以创建一个传入的范围，但我觉得angular应该自动解决范围和服务依赖关系。

如何将控制器函数从其名称中解析为字符串及其依赖项，以便将其分配给范围变量？

Answer 1

我正在寻找同样的事情，现在几个小时后终于可行了：

您可以使用$ controller - service，但正如您所注意到的，您需要自己创建范围：

$controller('InnerCtrl', { $scope: $scope.$new() } );

别担心，所有其他变量都会正确注入，但Angular无法自行创建新范围。如果你想在你的HTML中添加控制器，它有点复杂，你需要在$ scope中有一个函数来暴露控制器的构造函数：

$scope.InnerCtrl = function() {
    return $controller('InnerCtrl', { $scope: $scope.$new() }).constructor;
}

在HTML中，您可以随时使用它：<ANY ng-controller="InnerCtrl"></ANY>

我用一些额外的细节写了post，但这是解决问题的主要方法。

如何从外部范围解析和分配内部控制器？

1 个答案: