Angular ngClass ghost class

Question

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

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

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

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

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

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

Answer 1

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

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