(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-класс & класс с выражением (который не существует на объем) он не будет работать, он не будет запускаться/компилироваться 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 нг-игровая класса doc:

директива ngClass позволяет динамически устанавливать классы CSS на HTML-элемента с помощью привязки данных выражение, представляющее собой все классы, которые будут добавлены.

Эта версия работает хорошо (jsfiddle)

Он использует только нг-класс, с вне регулярного класса

<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