使用每次都不同的transclude重复指令

Question

在我的angular应用程序中，我有几个面板，它们具有共享结构，即相同的html。

在面板内部，内容和行为发生了变化，基本上每一个都是一个单独的指令，我们称之为面板内容。

这是我认为最理想的解决方案，但我对体系结构有一些疑问。

由于我有指令（它有transclude真集）：

<panel></panel>

它的模板看起来像这样：

<div>
    Content
    <ng-transclude></ng-transclude>
</div>

我必须重复面板

<ul>
    <li ng-repeat="panel in panels">
        <panel>
            <panel-content></panel-content>
        </panel>
    </li>
</ul

这一切都很好，但在每次迭代中"选择"我应该显示哪个<panel-content>，有什么合理的好方法呢？

假设我有一个panel.id可以使用。

我注意到我可以通过几种方式实现，我可以使用面板id在<panel-content>视图中进行ng切换，我可以设置的templateUrl有一个动态部分，并根据panel.id链接到不同的URL。

但出于某种原因，我确信我错过了一些更美好、更直接的东西？

请不要说这个建筑不是一成不变的，如果有其他结构更适合我的需求，请告诉我。

那么，问题又来了，我该如何选择呢？或者更确切地说，谁负责选择应该显示哪个<panel-content>。

Answer 1

如果我理解得对，我会在每次通过id:更改模板的指令中使用ng-include

类似于：

<ul>
    <li ng-repeat="panel in panels">
        <panel type-id="panel.id">
        </panel>
    </li>
</ul>

和指令：

app.directive('panel', 
 function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ng-include src="getTemplateUrl()"/>',

        link: function(scope,elem,attrs) {
           scope.getTemplateUrl = function() {
                var url;
                if(attrs.typeId !== undefined){
                    var url =  $rootScope.list_templates[attrs.typeId].value; // TODO: add validation
                  }

                return url;
            };
         }
      });

应用程序

 $rootScope.list_templates = [
   { id: 0, value: 'partials/upcoming_0.html'},
   { id: 1, value: 'partials/upcoming_1.html'},
   { id: 2, value: 'partials/upcoming_2.html'}
];