指令模板 - 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]}}的财产属性名称发送。