javascript - 当元素在类属性中具有插值运算符时，addClass 不起作用

Question

我正在尝试在 angular.jslink函数中使用 addClass 函数，我想我发现了一个错误。

问题：

如果我在模板{{}}的属性中有一个插值运算符 ( ) ，那么将默默地失败并且不添加新类。classaddClass

例如 -

考虑到这个链接功能：

angular.module('myApp', []).directive('afterRepeat', function() {
    return  {        
        link: function(scope,element, attrs){                                                
                if (scope.$index%2==0){
                    element.addClass("special");
                }
            }
    }
});

该模板有效并正确添加了类

<div class="item" ng-repeat="item in items" after-repeat>item {{$index}}</div>

这个模板不

<div class="item{{$index}}" ng-repeat="item in items" after-repeat>item {{$index}}</div>

这是一个演示问题的jsFiddle

我认为这是因为属性值在链接函数之后被评估 - 但这对我来说没有意义。链接功能不应该是链中的最后一步吗？

有谁知道如何克服这个问题？

Answer 1

两种选择：

a) 在作用域上有一个方法，它将返回适当的类名  

$scope.getClass = function(index){
  var klass = 'item' + index;
  if(index % 2 === 0){
    klass += ' special';
  }
  return klass;
};

<div ng-class="getClass($index)" ng-repeat="item in items">item {{$index}}</div>

b) 使用 ng-class 表达式：

<div 
  class="{{'item'+$index}}" 
  ng-class="{special: $index%2==0}" 
  ng-repeat="item in items"
>
  item {{$index}}
</div>

小提琴