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-remove'类将被删除！真正的评估。所以，为了测试，我将类改为'mdi-filter-outline'。有了这个课，它在某种程度上运作良好！我只改变了课程，如果我把前一个课程改回来，它就会再次停止工作。最奇怪的是，在切换之前，在切换到'mdi-filter-outline'类之前，'mdi-filter-remove'类会瞬间闪烁。

如果我为切换设置断点并开始点击'跳过下一个函数调用'，我会在执行angular.js中的第17286行之后，点击几下后看到'mdi-filter-remove'：

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

在项目中任何地方都没有使用该类，我用原子搜索整个项目，没有匹配！它来自哪里？

请帮忙！

Answer 1

您的项目中是否有ngAnimate？如果这样做，则使用ng-class添加和删除类会导致在幕后添加和删除一些特殊类，以用于过渡动画。其中一个特殊类是具有-remove后缀的类。例如，如果您要添加一个名为my-class的类，并使用ng-class进行删除，那么每当有my-class-add和my-class-remove类时，它们也会出现在它们旁边。元素正在转变。这就是你一瞬间看到它的原因。

所以，你应该重命名你的班级。 -remove后缀与角度自动进行冲突。