指令模板 - html文本插值的使用屬性？

Question

Angular 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}}？如果不是這樣，那麼通過重複使用帶有如此多代碼塊的指令，我不會真的讓我的代碼變得更乾燥。

Answer 1

我會在你的指令中創建控制器，並在它內部檢查發送給範圍的屬性，在這個特定的例子中最好是switch語句。所以在switch設置哪個參數應該在視圖中使用。

（在指令的鏈路或控制器的僞代碼）

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> 

我看到，也排序發生變化，所以對於排序類型創建第二可變和在控制器指定它，以相同switch。

---

一兩件事，指令屬性從父範圍分配（道具）可以沒有任何控制器的代碼中使用，道具是鑑於可用的，因此它可以在相同的語法等一起使用 - {{someArr[filterName]}}其中filterName是指令屬性。

回到你的問題 - 如果我們應在視圖中使用，例如column:'@'和示例值將是code,description然後在視圖只需要{{choice[column]}}的財產屬性名稱發送。