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

Question

在我的 Angular 应用程序中，我有几个具有共享结构、相同 html 的面板。

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

这是我认为最接近的解决方案，但我对架构有一些疑问。

因为我有指令(它有 transclude true 集):

<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我可以用。

我注意到我可以通过多种方式实现它，我可以在 <panel-content> 中做一个 ng-switch使用面板 ID 查看，我可以设置 templateUrl 具有动态部分并链接到不同的 URL，具体取决于 panel.id .

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

请注意，这个架构不是一成不变的，如果有另一种结构更适合我的需要，请告诉我。

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

Answer 1

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

类似于:

<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'}
];