3

我遇到了一个问题，我不确定是 Angular 的限制（可能）还是我对 Angular 知识的限制（可能）。

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

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

我的例子有望更好地解释我的困境。

JSFiddle： http: //jsfiddle.net/PT5BG/22/（最后更新时间为英国夏令时 16:30）

为什么我这样做可能没有意义，但我已经将这个概念从我正在创建的更大系统中提取出来。如果您有其他建议，这些是我必须遵守的法律：

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

AngularJS 上的文档并不十分全面，所以我希望这里有人能提供帮助！

4

2 回答 2

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");
});
于 2013-10-19T18:24:41.543 回答
0

我最终解决这个问题的方法很简单，这只是一个解决问题的案例。

所以我有一个从 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
});

它需要一些黑客攻击，但现在它工作得很好。

于 2013-10-20T08:25:19.227 回答