データに基づいて動的にディレクティブを選択します。

Question

オブジェクトの配列に基づいてテーブルを作成しようとしています。この配列には同じ型のオブジェクトは含まれておらず、各行には完全に異なるスタイルとonclick関数が必要ですが、基本的に完全に異なる動作です。例えば 、Iは、テンプレートとコントローラとDIRCための完全に異なる機能とテンプレートを必要DIRBオブジェクト・タイプの

var data=[ 
    { 
    type:'dir-b', 
    data: { ... } 
    }, 
    { 
    type:'dir-b', 
    data: { ... } 
    }, 
    { 
    type:'dir-c', 
    data: { ... } 
    } 
] 

。

解決策は、3つのディレクティブを作成することでした。そのうちの1つは、データに基づいて追加する他の2つのディレクティブの1つを決定するために実行されます。

.directive("dirA", function($compile){ 
    return{ 
    restrict:'A', 
    priority:1000, 
    terminal:true, 
    link: function(scope, element, attribute){ 
     element.removeAttr("dir-a");//prevent endless loop 
     element.attr(attribute.type,""); 
     $compile(element)(scope); 
    } 
    } 
}) 
.directive("dirB", function($compile){ 
    return{ 
    restrict:'A', 
    replace:true, 
    link: function(scope, element, attribute){ 
     console.log("dirA"); 
    } 
    } 
}) 
.directive("dirC", function($compile){ 
    return{ 
    restrict:'A', 
    replace:true, 
    link: function(scope, element, attribute){ 
     console.log("dirC"); 
    } 
    } 
}); 

<tr dir-a type='{{d.type}}' ng-repeat='d in data'/>は、所望の効果がありません。私はdirAに0の優先順位を与え、それは属性を解析することができますが、配列のサイズよりも何度も繰り返すか、1000の優先順位を与え、b.typeを解析してそれをリテラルとして使用することはできません。 誰にもこれに対する解決策がありますか？

Answer 1

これは最高の解決策ではありませんでしたが、私が見つけた解決策でした。

<table> 
    <tbody ng-repeat='d in data'> 
    <tr ng-if='d.type=="dir-b"' dir-b></tr> 
    <tr ng-if='d.type=="dir-c"' dir-c></tr> 
    </tbody> 
</table> 

に起因して、この方法でのみ、正しい行は、これまでに表示されますが、問題は、データにあるようtbodyのは、多くの行として繰り返されることであるNG-場合。しかし、より良い解決法があるまで、これは私がそれをした方法です。

Answer 2

ここではngSwitchを使用する可能性があります。

Plnkr

HTML

<div ng-repeat="(key, d) in data track by $index"> 
    <div class="tbody" ng-switch on="d.type"> 
    <div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div> 
    <div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div> 
    </div> 
</div> 

次に、あなただけのdirBとdirCディレクティブを定義します。

これはhtmlテーブルとして表示されませんが、うまくいけばこれで作業できますか？