javascript - Angular ngClass 幽灵类

Question

我正在使用 Material Design 图标(可能不相关)使用 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”。有了这个类(class)，它就可以正常工作了!我只改变了类(class)，如果我把前一个类(class)放回去，它就会再次停止工作。最奇怪的是，在切换到“mdi-filter-outline”类之前，“mdi-filter-remove”类会瞬间闪烁。

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

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

该类没有在项目中的任何地方使用，我用atom搜索了整个项目，没有匹配!它从哪里来？

请帮忙!

Answer 1

你的项目中有ngAnimate吗？如果这样做，则使用 ng-class 添加和删除类导致在幕后添加和删除一些特殊类，以便与过渡动画一起使用。这些特殊类之一是带有 -remove 的类。后缀。例如，如果您有一个名为 my-class 的类您使用 ng-class 添加和删除，然后是类 my-class-add和my-class-remove每当元素转换时，也会与它们一起显示。这就是为什么你会看到它一瞬间。

所以，你应该重命名你的类。 -remove后缀与 Angular 自动执行的操作相冲突。