Question

我遇到了一个问题，我不确定是否会受到Angular（可能）的限制或者我对Angular（可能）的了解有限。

我正在尝试使用一组控制器，并动态创建/加载它们。我有一个原型工作到控制器运行的点，并且可以访问根范围，但是我不能动态地将ng-controller附加到div，以便将控制器封装到它们自己的本地范围中。

问题是模板绑定到根范围，但不绑定到它们自己的范围。

我希望能够更好地解释我的困境。

JSFiddle：http://jsfiddle.net/PT5BG/22/（最后更新16:30 BST）

为什么我这样做可能没有意义，但我把这个概念从我正在创建的更大的系统中拉出来。如果您有其他建议，这些是我受约束的法律：

控制器不能进行硬编码，必须使用数组构建
范围不能在控制器之间共享，它们必须有自己的范围

关于AngularJS的文档并不完全全面，所以我希望有人可以提供帮助！

Answer 1

您可以直接传递控制器名称并使用$controller服务并将本地传递给它。你需要某种ModuleCtrl的东西来协调这一切。这是一个做你想要的基本例子。

http://jsfiddle.net/PT5BG/62/

angular.module('app', [])
.controller('AppCtrl', function ($scope, $controller) {
    $scope.modules = [
        { name: "Foo", controller: "FooCtrl" },
        { name: "Bar", controller: "BarCtrl" }]
})
.controller('ModuleCtrl', function ($scope, $rootScope, $controller) {
    $controller($scope.module.controller, { $rootScope: $rootScope, $scope: $scope });
})
.controller('FooCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am foo";
    $scope.localMessage = "I am foo";
    console.log("Foo here");
})
.controller('BarCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am bar";
    $scope.localMessage = "I am bar";
    console.log("Bar here");
});

Answer 2

我最终解决这个问题的方式非常简单，只是一个解决问题的方法。

所以我有一个模块列表，我从API获得，我想实例化它们。我通过约定构建路径来包含模板文件，如下所示：

<!-- the ng-repeat part of the code -->
<div ng-repeat="module in modules">
    <ng-include src="module.name + '.tpl.html'"></ng-include>
</div>

在每个模块模板文件中，我然后声明ng-controller 和我在ng-init中声明要触发的方法。由于模板仍在ng-repeat循环内，因此它可以访问module，其中包含我们要传递给子控制器的数据。 ng-init在本地范围内运行，因此我们传入模块对象：

<!-- the template of the module -->
<div ng-controller="ModuleCtrl" ng-init="init(module)">
    ...
</div>

然后我们将它存储在本地范围内，然后你去注入对象。

/* the controller of the module */
.controller('ModuleCtrl', function ($scope) {
    $scope.init = function(module) {
        this.module = module;
    };

    // this.module is now available inside the controller
});

它需要一些黑客攻击，但它现在完美无缺。

动态加载具有自己的范围的控制器

2 个答案: