Использование класса с angular vs ng-class при использовании смешанного выражения

У меня есть div, который я хочу дать динамическому классу с AngularJS.

div содержит инструкцию ng-repeat, где lang.prefix сначала en, затем sv

Использование следующего кода работает и устанавливает класс в i-flag-en, чем i-flag-sv, но верно ли это?

<div class="float-left flag i-flag-{{lang.prefix}}"></div>

Я знаю, существует директива ng-class, которая может использоваться для динамического определения класса элемента с помощью AngularJS.

Я думаю, что я где-то читал в книге, что нормальная директива класса не должна использоваться для динамического определения свойства класса с помощью AngularJS из-за способа Angular манипулировать dom.

Однако следующий код не работает:

<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>

и я скорее хочу установить класс таким образом, а не создавать другую переменную области видимости.

Неправильно ли использовать атрибут класса с AngularJS для динамического набора класса? Он работает все время, даже если это будет плохая практика?

Ответ 1

В упомянутой книге можно было говорить о проблемах использования интерполяций ng-class и class {{}}, в которых обновления в интерполяции удаляют классы ng-class, эта проблема уже решена, ссылка. Таким образом, использование интерполяции в атрибутах класса полностью прекрасное и не нарушает хорошую практику, потому что у обоих есть свои собственные причуды.

Однако использование вами ng-класса неверно, вам нужно объединить литеральное строковое значение с помощью строковой переменной scope:

<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>

но я думаю, что гораздо предпочтительнее использовать ваш первый пример:

<div class="float-left flag i-flag-{{lang.prefix}}"></div>