Angular ngClass 幽灵 class

Question

我使用 Material 设计图标（可能无关紧要）对 classes 和 ngClass 进行了简单切换。这是一个例子：

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

由于某种原因它没有工作，'mdi-filter-remove' class 将在 !true 评估时被删除。因此，为了测试，我将 class 更改为 'mdi-filter-outline'。有了那个 class 它就可以正常工作了！我只更改了 class，如果我把前一个放回去，它又会停止工作。最奇怪的是，在切换到 'mdi-filter-outline' class 之前，'mdi-filter-remove' class 闪烁了一秒钟。

如果我为切换设置断点并开始单击 'step over next function call' 我确实在单击几下后看到 'mdi-filter-remove'，就在 angular.js 中的第 17286 行执行之后：

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

那个class没有在项目的任何地方使用，我用atom搜索了整个项目，没有匹配！它来自哪里？

请帮忙！

Answer 1

你的项目中有ngAnimate吗？如果这样做，则使用 ng-class 添加和删除 classes 会导致在幕后添加和删除一些特殊的 classes，以用于过渡动画。这些特殊的 classes 之一是带有 -remove 后缀的 class。因此，例如，如果您有一个名为 my-class 的 class，您要使用 ng-class 添加和删除它，那么 class 就是 my-class-add 和 my-class-remove 也会在元素转换时出现在它们旁边。这就是为什么你会在一瞬间看到它。

所以，您应该重命名 class。 -remove 后缀与 angular 自动执行的操作冲突。

Angular ngClass 幽灵 class

Angular ngClass ghost class

javascript

angularjs

ng-class