在AngularJS的ng-repeat指令中动态显示模板？答案

【问题标题】：Dynamically displaying template in ng-repeat directive in AngularJS?在AngularJS的ng-repeat指令中动态显示模板？
【发布时间】：2013-04-22 19:51:49
【问题描述】：

我正在尝试根据当前项目动态显示 ng-repeat 指令中的几个模板之一。

我的 JSON 数据如下所示：

data: {
    groups: [
        {
            name: "Group 1",                
            sections: [
                { name: "Section A" },
                { name: "Section B" }
            ]
        },
        {
            name: "Group 2",                
            sections: [
                { name: "Section A" },
                { name: "Section B" }
            ]
        }
    ]
}

我的目标是动态呈现数据树，每个组包含多个部分。这些组都有相同的模板，但每个部分都应该有自己的模板，基于名称字段。

假设顶级 HTML 是：

<div ng-repeat="group in groups">
    {{ group.name }}
    <div ng-repeat="section in sections">
        <!-- Dynamic section template used -->
    </div>
</div>

理想情况下，每个部分还需要有自己的范围数据和与之关联的控制器。我很幸运地使用 Knockout 构建了这种类型的系统，但我正在尝试了解 Angular 的做事方式。

【问题讨论】：

听起来是一个很好的指令案例。
Lucuma，你能多评论一下吗？我也考虑过使用指令，但不确定理想的粒度级别。我应该构建一个只选择模板的指令，还是每个“部分”都有自己的指令？
我认为这取决于你想怎么做。您可以创建一个指令来完成所有操作（传入 groups 数组）和/或您可以创建另一个在您的 groups 指令中调用的指令来处理这些部分。指令的好处是它们有自己的范围。我将提供一个小例子。

标签： angularjs

【解决方案1】：

你可以这样做：

<div ng-repeat="group in groups">
    {{ group.name }}
    <div ng-repeat="section in sections" ng-include="getIncludeFile(section)">
        <!-- Dynamic section template used -->
    </div>
</div>

然后在你的控制器中：

$scope.getIncludeFile = function(section) {
    // Make this more dynamic, but you get the idea
    switch (section) {
        case "Section A":
            return 'partials/sectiona.html';
        case "Section B":
            return 'partials/sectionb.html';
    }
}

那么你的 sectiona.html 可能看起来像这样（有一个特定于该文件的控制器）：

<div ng-controller="SectionAController">
    <!-- HTML in here, and can bind straight to your SectionAController -->
</div>

【讨论】：

这是我目前使用的最直接的方法。如果我的需求变得更复杂，我可能会采用 Directive 方法。
如果我想将 json 项目转换为链接列表，该链接将路由到新页面...所有这些页面都将遵循具有独特属性的相同模板，如 post-type ....但我不需要数据库或管理员。只需为每个数据项创建一个具有相同视图模板的新页面。

【解决方案2】：

在过去的一个月里，有一个检查到 angular 以支持指令中的动态模板，但是我无法找到关于它的使用的很多信息。这是参考。 https://github.com/angular/angular.js/pull/1849

虽然这仍然使用相同的 nginclude，但它都封装在两个指令中：

演示：http://plnkr.co/edit/4DIlHMNlHQ8Wm9XHNycH?p=preview

HTML：

<groups-control groupdata="groups"></groups-control>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  var json = {data: {
    groups: [
        {
            name: "Group 1",                
            sections: [
                { name: "Section A" },
                { name: "Section B" }
            ]
        },
        {
            name: "Group 2",                
            sections: [
                { name: "Section A" },
                { name: "Section B" }
            ]
        }
    ]
  }};
  $scope.groups = json.data.groups;

});

指令一分为二：

app.directive('groupsControl', function(){
    return {
      restrict: 'E',

      replace: true,
      transclude: false,
      scope: { items:'=groupdata'},

      template: '<div ng-repeat="group in items">' +
                  '{{ group.name }}' +
                  '<section-control sections="group.sections" />'+

              '</div>',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {


      }
    }
  }).directive('sectionControl', function(){
    return {
      restrict: 'E',

      replace: true,
      transclude: false,
      scope: { items:'=sections'},

      template: '<div ng-repeat="section in items" ng-include="getIncludeFile(section)">'+
                '</div>',

      link: function(scope, element, attrs) {
        scope.getIncludeFile = function(section) {
            return section.name.toLowerCase().replace('section ','') + ".html";
        }

      }
    }
  });

我实际上希望看到有人根据一些范围数据使用 templateUrl 的函数发布答案。

【讨论】：