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

时间:2015-04-10 12:02:47

标签: javascript angularjs angularjs-directive angularjs-ng-transclude

在我的角度应用程序中,我有几个具有共享结构的面板,相同的html。

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

这是我认为最优的解决方案,但我有一些架构上的疑虑。

因为我有指令(它具有转换真集):

<panel></panel>

它的模板如下所示:

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

我必须重复这些小组

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

这一切都很好,但是选择&#34;这将是一个相当好的方式。在我应该展示<panel-content>的每次迭代中?

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

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

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

请注意,如果有其他结构更符合我的需求,请告知我们,这个架构不是一成不变的。

所以,问题又是,我该如何选择?或者更确切地说,谁负责选择应显示哪个<panel-content>

1 个答案:

答案 0 :(得分:3)

如果我理解正确,我会在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'}
];

应用

{{1}}