角度-修改指令中DOM元素的正確方法？

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');
    }

    //...
}