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


Dynamically displaying template in ng-repeat directive in AngularJS?

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

我的JSON数据如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data: {
    groups: [
        {
            name:"Group 1",                
            sections: [
                { name:"Section A" },
                { name:"Section B" }
            ]
        },
        {
            name:"Group 2",                
            sections: [
                { name:"Section A" },
                { name:"Section B" }
            ]
        }
    ]
}

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

假设顶级HTML是：

1
2
3
    {{ group.name }}
   
        <!-- Dynamic section template used -->

理想情况下，每个部分还需要有自己的范围数据和与之关联的控制器。我很幸运用淘汰的方式建立了这种类型的系统，但我正在努力理解做事情的角度方式。

相关讨论

你可以这样做：

1
2
3
    {{ group.name }}
   
        <!-- Dynamic section template used -->

然后在控制器中：

1
2
3
4
5
6
7
8
9
$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可以如下所示(要有一个特定于该文件的控制器)：

1
    <!-- HTML in here, and can bind straight to your SectionAController -->
相关讨论

在过去的一个月里，为了支持一个指令中的动态模板，有一个签入到Angular，但是我找不到关于它的使用的很多信息。这是参考资料。https://github.com/angular/angular.js/pull/1849

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

演示：http://plnkr.co/edit/4dilhmnlhq8wm9xhnych？P=预览

HTML：

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

控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;

});

指令分为两部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
app.directive('groupsControl', function(){
    return {
      restrict: 'E',

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

      template: '' +
                  '{{ group.name }}' +
                  '<section-control sections="group.sections" />'+

              '',
      // 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: ''+
                '',

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

      }
    }
  });

实际上，我希望看到有人使用基于某些范围数据的templateURL函数发布一个答案。