Question

我有一个指令powerEntry，我想根据模型状态添加/删除不同的CSS类。

目前，我有一个链接功能，有这样的逻辑：

的script.js

  if (calcState.availablePoints > 0 && isHighEnoughLevel) {
    levelUpBtnClass = 'enabled';
  } else if (calcState.availablePoints === 0 ) { // TODO: If ability is at cap, also disabled.
    levelUpBtnClass = 'disabled';
  }

  if (power.currentRank<=1) {
    powerRankClass = 'standard';
  } else {
    powerRankClass = 'enhanced';
  }

HTML

<img class="powerIcon" ng-src="/images/heroes/{{hero.name}}/powers/{{power.iconSrc}}">
<span class="powerRank" ng-class="powerRankClass">{{power.currentRank}}</span>
<div class="levelUpBtn" ng-class="levelUpBtnClass"></div>

虽然此实现功能正常，但我不知道它是否正确。似乎ng-class确实采用了三元运算符，但我觉得在我的HTML中放置一个复杂的JS表达式是错误的方法。

这里有最好的方法吗？是否存在对这种或那种方式的性能影响？

Answer 1

这是你应该使用ngClass表达式的地方。

因此，您可以按照以下方式执行某些操作：

 ng-class="{enhanced: powerRankClass > 1, standard: powerRankClass == 1}"

如果你设置了一个jsfiddle，我可以让它为你工作。

Answer 2

如果您不想使HTML复杂化，我建议以编程方式通过链接函数添加类。

链接功能接受该元素，因此您可以执行以下操作：

function link(scope, element, attrs) {
    //...

    if (power.currentRank<=1) {
        element.addClass('standard');
    } else {
        element.addClass('enhanced');
    }

    //...
}

Angular - 修改指令中DOM元素的正确方法？

2 个答案: