（AngularJS）通過數據綁定動態設置CSS類

Question

我注意到，當我將ng-class與可能未設置的class + expression (class="something-{{ stuff }}") ，不會編譯ng-class 。

例：

這樣就可以正常工作了（ JSFIDDLE ）

<div 
     ng-controller="MainCtrl" 
     ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
     >
     Lorem ipsum dolor sit amet

但是，當我使用帶表達式的ng-class＆class （在作用域中不存在）時 ，它將無法工作，它將無法運行/編譯ng-class 。 （ JSFIDDLE ）：

<div
    ng-controller="MainCtrl"
    class="just-a-class color-{{ data.color }}"
    ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
    >
    Lorem ipsum dolor sit amet.
</div>

有什么辦法可以同時使用ng-class和class with expression或者有什么解決方法？ 任何建議，不勝感激。

Answer 1

當您需要添加具有數據綁定或條件的類時，請使用ng-class。

從angularjs的ng-class doc中 ：

ngClass指令允許您通過數據綁定表示要添加的所有類的表達式來動態設置HTML元素上的CSS類。

這個版本運作良好（ jsfiddle ）

它僅使用ng-class，而沒有常規類

<div ng-controller="MainCtrl" 
    ng-class="{'font-large' : (data.size >= 10), 
                'font-small' : (data.size < 10),
                'color-{{ data.nothing }}' : color.nothing }">

    Lorem ipsum dolor sit amet
</div>

這樣， 只有在data.nothing為true ng-class才會處理'color-{{data.nothing}}'