Question

在某些地方，我创建了一个包含两个或更多变体的表格。它显示了主要数据和一些细节列。主要数据始终相同，细节根据用户的选择而有所不同。让我们说，它看起来像是

Name Count LongDescription Price

或

Name Count Availability    Price

或

Name Count Weigth Volume   Price

归结为吨数

ng-if="detail=='description'"
ng-if="detail=='availability'"
ng-if="detail=='description' || "detail=='availability'"

首先，我将好的描述性名称缩短为一个字母，以消除混乱。然后我想采用一些约定并创建我自己的指令detail：

detail="d"     => ng-if="detail=='d'"
detail="da"    => ng-if="detail=='d' || detail=='a'"

或者

detail="da"    => ng-if="'da'.contains(detail)"

通过复制和调整ngIfDirective的来源，我得到了（有点）工作，但创建一个转换为ng-if的指令感觉更干净。所以我的问题：

哪种方式更好？
如何将指令翻译成另一个指令？

Answer 1

让属性限制指令添加一个新的ng-if属性，其值是根据自己的值生成的，然后重新编译：

.directive('detail', function($compile){
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      if(!attrs.ngIf) { // prevent infinite loop
        switch (attrs.detail) {
          case 'd':
            attrs.$set('ngIf', "detail == 'd'");
            break;
          case 'a':
            attrs.$set('ngIf', "detail == 'a'");
            break;  
          case 'da':
            attrs.$set('ngIf', "detail == 'd' || detail =='a'");
            break;
        }
        $compile(elem)(scope); // relink directive element
      }
    }
  }
})

用法：

<div detail="d">My element exists because: <b>$scope.detail == 'd'</b></div>

Plunker Example

指令：将一个属性表达式转换为另一个属性表达式

1 个答案: