动态加载具有自己作用域的控制器

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

这需要一些黑客攻击，但它现在运行良好。