Класс-призрак Angular ngClass

Я делал простое переключение классов с помощью ngClass, используя значки дизайна материалов (вероятно, не имеет значения). Вот пример:

<button ng-click="toggle = !toggle">
  <i class="mdi" ng-class="{'mdi-filter': toggle, 'mdi-filter-remove': !toggle}"></i>
</button>

И по какой-то причине это не сработало, класс mdi-filter-remove удалялся при оценке !true. Итак, для проверки я изменил класс на «mdi-filter-outline». С этим классом как-то нормально работает! Я только изменил класс, если вернуть предыдущий, то он снова перестает работать. И что самое странное, при переключении перед переключением на класс mdi-filter-outline на долю секунды мигает класс mdi-filter-remove.

Если я установлю точку останова для переключателя и начну нажимать «перейти к следующему вызову функции», я действительно увижу «mdi-filter-remove» после нескольких щелчков, сразу после выполнения строки 17286 в angular.js:

fn(value, ((last === initWatchVal) ? value : last), current);

Этот класс не используется НИГДЕ в проекте, я искал весь проект с атомом, совпадений нет! Откуда это взялось?

Пожалуйста помоги!


javascript angularjs ng-class
person abfarid    schedule 02.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть ngAnimate в вашем проекте? Если вы это сделаете, то добавление и удаление классов с помощью ng-class приведет к добавлению и удалению некоторых специальных классов за кулисами для использования с анимацией перехода. Одним из таких специальных классов является класс с суффиксом -remove. Так, например, если у вас есть класс с именем my-class, который вы добавляете и удаляете с помощью ng-class, то классы my-class-add и my-class-remove также будут отображаться рядом с ними при каждом переходе элемента. Вот почему вы видите это на долю секунды.

Итак, вы должны просто переименовать свой класс. Суффикс -remove противоречит тому, что делает angular автоматически.

person wrshawn    schedule 03.08.2016
comment
Вы были правы, это был ngAnimate, он добавлял класс «*-remove» к элементу ngClass, и этот класс соответствует классу значков, поэтому он появлялся. Но я не могу изменить имя класса, потому что оно из компонента, поэтому я добавил $animate.enabled($('.filter'), false);, где .filter — это элемент, который я не хочу анимировать. Огромное спасибо! - person abfarid; 03.08.2016