指令テンプレート - htmlテキスト補間の属性を使用しますか？

Question

角1. *

私は自分のコードを乾燥機にするか、しようとしています。しかし、jsonデータ構造の違いのために、各ラジオボタンの補間テキストのために可能であるかどうかはわかりません。

<ppv-filter filter-name="Region" radio-value="choice.code" 
    sort="description" filter-data="regions"></ppv-filter> 
    <ppv-filter filter-name="Market" display-prop="description" 
    filter-data="markets"></ppv-filter> 
    <ppv-filter filter-name="Dealer" display-prop="code" 
    filter-data="dealers"></ppv-filter> 

ディレクティブテンプレート：

<div ng-if="filterName === 'Region'"> 
    <div ng-repeat="choice in filterData| orderBy: sort"> 
     <input type="radio" value="{{choice.code}}" name="regionRadio"> 
     {{choice.description}} 
    </div> 
    </div> 

    <div ng-if="filterName === 'Market'"> 
    <div ng-repeat="choice in filterData| orderBy: 'code'"> 
     <input type="radio" name="bob"> 
     {{choice.code}} 
    </div> 
    </div> 

    <div ng-if="filterName === 'Dealer'"> 
    <div ng-repeat="choice in filterData| orderBy"> 
     <input type="radio" name="foo"> 
     {{choice}} 
    </div> 
    </div> 

---

angular.module('app') 
    .directive('ppvFilter', ['regionMarketDealerSrv', 
    function(regionMarketDealerSrv) { 
     return { 
     templateUrl: 'app/ppv/ppv-filter.dir.html', 
     restrict: 'E', 
     scope: { 
      filterName: '@', 
      sort: '@', 
      radioValue: '@', 
      filterData: '=' 
     }, 

それは{{choice.description}}の、例えば、場所を取るために結合属性を渡すことは可能ですか？もしそうでなければ、私は本当にたくさんのコードng-ifブロックを持つディレクティブを再利用してコードを乾燥させるわけではありません。

Answer 1

私はあなたのディレクティブの内部にコントローラを作成し、その内部には、この特定の例ではswitch文であることが望ましいスコープに送られるチェックプロパティをチェックします。したがって、switchでは、どのparamをビューで使用するかを設定します。

（ディレクティブのリンク又はコントローラで擬似コード）

switch (scope.filterName){ 

    case "Market": 
    scope.field="code"; 
    break; 


    //other possibilities 
} 

次のビューでは、配列構文[フィールド]を使用して、唯一の構造を必要とします。

<div> 
<div ng-repeat="choice in filterData| orderBy: 'code'"> 
    <input type="radio" name="bob"> 
    {{choice[field]}}<!-- HERE MOST IMPORTANT --> 
</div> 
</div> 

Iソートも変化することがわかるので、ソート・タイプの第二の変数を作成し、コントローラに同じswitchでそれを割り当てます。

---

もう一つそれは同じ構文で使用することができるように、ディレクティブは、親スコープから割り当てられた（小道具）は、任意のコントローラ・コードなしで使用することができる属性、小道具など、ビューで利用可能である - filterNameディレクティブた{{someArr[filterName]}}属性。

あなたの問題に戻る - たとえばcolumn:'@'のように表示に使用するプロパティの属性名で送信し、値の例がcode,descriptionの場合は、{{choice[column]}}のみが必要です。