重复使用transclude一个指令，每一次都是不同的 [英] Repeating a directive with transclude that is different each time

问题描述

在我的角度应用我有有一个共同的结构几个小组，相同的HTML。

In my angular application I have several panels which have a shared structure, identical html.

在面板里面的内容和行为的变化，基本上每个人都是一个独立的指令，我们姑且称之为面板的内容。

Inside the panel the content and behavior changes, basically each one is a separate directive, let's call them panel-content.

这是接近的解决方案，我认为是最佳的，但我有一些建筑疑惑。

This is the close to the solution I think is optimal but I have some architectural doubts.

因为我有指令（已transclude真集）：

Since I have directive (which has transclude true set):

<panel></panel>

它的模板看起来是这样的：

It's template looks like this:

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

我要重复面板

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

这是所有好的，但什么是在每次迭代选择了一个相当好的方式，也＆LT;面板含量＆GT; 我应该给

This is all fine, but what would be a reasonably good way of "choosing" on each iteration which <panel-content> should I show?

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

Lets say I have a panel.id I can use.

我发现我可以通过多种方式实现它，我可以做里面的℃的NG-开关，面板内容和GT; 使用面板上的标识来看，我可以设置那达的templateUrl具有活力的部分，并根据链接到不同的URL的 panel.id 。

I notice I can achieve it in several ways, I could do an ng-switch inside the <panel-content> view using the panel id, I could set up that the templateUrl of has a dynamic part and links to different URLs depending on the panel.id.

但由于某些原因，我相信，我失去了一些东西更好更直接？

But for some reason, I am convinced I am missing something nicer more straightforward?

请注意，这架构并不是一成不变的，如果有，将更好地满足我的需求，请让我知道另一种结构。

Please not that this architecture is not set in stone, if there is another structure that would better fit my needs please let me know.

所以，问题又是，我该如何选择？或者说，谁负责选择哪些＆LT;面板内容的方式＆gt; 应当显示

So, the question again is, how do I choose? Or rather, who is responsible for choosing which <panel-content> should be displayed.

推荐答案

如果我理解你的权利，我会用 NG-包括中的指令，每次更改模板通过 ID ：

If I understand you right, I would use ng-include in directive that changes each time the template by 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'}
];

这篇关于重复使用transclude一个指令，每一次都是不同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！