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}}？如果没有，那么通过重复使用具有如此多代码ng-if块的指令，我并没有真正使我的代码更干燥。

Answer 1

我会在你的指令中创建控制器，并在里面检查发送到范围的属性，在这个特定的例子中，最好是switch语句。所以在switch集中应该在视图中使用哪个参数。

（指令的链接或控制器中的伪代码）

switch (scope.filterName){

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


  //other possibilities
}

接下来在视图中我们只需要一个结构，使用数组语法 [field] 。

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

我看到排序也会发生变化，因此为排序类型创建第二个变量，并将其分配给控制器中的同一个switch。

还有一件事，从父作用域分配的指令属性（道具）可以在没有任何控制器代码的情况下使用，道具在视图中可用，因此可以使用相同的语法，如{{someArr[filterName]}}其中{{1是指令属性。

返回您的问题 - 如果我们按属性名称发送应该在视图中使用的属性filterName，示例值为column:'@'，那么只需查看code,description

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

1 个答案: