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

Question

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

20

У меня есть 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 для динамического набора класса? Он работает все время, даже если это будет плохая практика?

user264230 02 авг. 2014, в 00:28

Источник

1

Хорошо, это из моего опыта, я не слишком осведомлен о внутренней работе угловой манипуляции DOM. Я не уверен, что использование class={{}} считается плохой практикой, я часто его использую и не нашел, чтобы это вызывало у меня какие-либо проблемы (пока). Используйте ng-class всякий раз, когда вы хотите установить класс условно или когда вы ожидаете, что класс изменится, используйте class="{{}}" всякий раз, когда вы хотите динамически оценивать классы, и не ожидайте выражения, получающегося в классе изменить. Например, чтобы вернуть строку классов из функции: class={{generateClassBasedOnProductType()}} .
Mohammad Sepahvand 01 авг. 2014, в 22:43

Теги:

javascript

angularjs

css

1 ответ

Ещё вопросы

Хорошо, это из моего опыта, я не слишком осведомлен о внутренней работе угловой манипуляции DOM. Я не уверен, что использование class={{}} считается плохой практикой, я часто его использую и не нашел, чтобы это вызывало у меня какие-либо проблемы (пока). Используйте ng-class всякий раз, когда вы хотите установить класс условно или когда вы ожидаете, что класс изменится, используйте class="{{}}" всякий раз, когда вы хотите динамически оценивать классы, и не ожидайте выражения, получающегося в классе изменить. Например, чтобы вернуть строку классов из функции: class={{generateClassBasedOnProductType()}} .

ryeballar · Accepted Answer · 2014-08-02T02-56-00.000Z

В упомянутой книге можно было говорить о проблемах использования интерполяций 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>