javascript - 使用 ng-if 或 ng-show 的 Angular 应用中的按钮 'flickering'

Question

我在两个不同的 Angular 应用程序中遇到过同样的问题，但我一直找不到关于这个问题的任何讨论——这让我觉得我可能遗漏了一些东西。假设我有一个“任务” View ，它可以处于多种不同状态，包括“待处理”、“已接受”和“已完成”。将根据任务的状态显示不同的操作按钮，例如:

<button ng-if="task.status === 'pending'" ng-click="ctrl.acceptTask()">Accept</button>

<button ng-if="task.status !== 'accepted'" ng-click="ctrl.acceptTask()">Flag</button>
<button ng-if="task.status === 'accepted'" ng-click="ctrl.flagTask()">Complete</button>

问题是，当用户点击接受按钮时，会在短时间内显示下面的两个按钮。就好像 Angular 在 DOM 中按顺序工作，在 ng-ifs 之间的短暂时间里，'flag' 和 'complete' 按钮都显示了，因为只有一个被更新了。 ng-show 也会发生这种情况。

请注意，这不是 ng-cloak 可以解决的问题，ng-cloak 只是为了防止模板在 angular 发挥其魔力之前显示出来。

鉴于我在我处理过的两个大型 Angular 应用程序中都遇到过这个问题，这一定是一个常见问题。关于通常如何解决的任何建议？ (PS，上面的 HTML 只是我的意思的一个例子，它不是我的实际模板。)

Answer 1

那是因为 ngIf 完全删除并重新创建了 DOM 中的元素。当使用 ngIf 删除一个元素时，它的范围被销毁，并在元素恢复时创建一个新的范围。在 ngIf 中创建的范围使用原型(prototype)继承从其父范围继承。此外，ngIf 使用其编译状态重新创建元素。

确实让 ngIf 评估为 false 将删除该元素。但前提是它没有立即设置为 true，因为 Angular 只有在有机会时才刷新 DOM(您的 HTML)，即在当前同步代码块之后。

下面的代码片段没有任何效果:

$scope.task.status= 'pending'; <br/>
$scope.task.status= 'accept';

这将

$scope.task.status= 'pending';
// $timeout will wait for a digest cycle before executing the code
// Angular will remove the button from the DOM
$timeout(function() {
   $scope.task.status= 'accept';
   // Here a second digest cycle happen, angular will put the button back into the DOM
});

请注意，这可能是由于您的 Angular 应用程序因 DOM 内容过多而出现许多观察者。我做了一个simple plunker 复制您的场景但不面对它。您可以通过添加可用的 chrome 插件和/或许多其他方式来检查和减少观察者，例如 this .只需谷歌一下，您就可以找到大量有用的信息来提高应用程序的观看者数量。

好的，现在我明白了您在这里的确切需求:) 看!! This是 Angular 文档告诉我们的“特别注意应该使用强大的 ng-switch 而不是几个相互排斥的 ng-shows。” good之一阅读“何时使用什么!!!”。因此，我希望如果您在这些实例中使用 ng-switch 不会发生闪烁的按钮，或者我们可以实现非常通用的解决方案脚手架，并且可以通过使用指令初始化函数进行实例间通信而根本不用担心当前范围.参见 this其中我以互斥的方式将类应用于多个按钮。