У меня есть 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 для динамического набора класса? Он работает все время, даже если это будет плохая практика?
В упомянутой книге можно было говорить о проблемах использования интерполяций 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>
class={{}}
считается плохой практикой, я часто его использую и не нашел, чтобы это вызывало у меня какие-либо проблемы (пока). Используйтеng-class
всякий раз, когда вы хотите установить класс условно или когда вы ожидаете, что класс изменится, используйтеclass="{{}}"
всякий раз, когда вы хотите динамически оценивать классы, и не ожидайте выражения, получающегося в классе изменить. Например, чтобы вернуть строку классов из функции:class={{generateClassBasedOnProductType()}}
.