使用ng-if或ng-show在角度应用程序中按钮"闪烁"

Question

我在两个不同的角度应用程序中遇到了同样的问题,但是我一直无法找到任何关于这个问题的讨论 - 这让我觉得也许我错过了一些东西.假设我有一个"任务"的视图,它可以处于许多不同的状态,包括"待定","接受"和"完成".将根据任务的状态显示不同的操作按钮,例如:

<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解决的问题,它只是为了防止在angular完成魔法之前显示模板.

鉴于我在我所研究的两个大角度应用程序中都遇到过这个问题,它一定是个常见问题.关于如何解决这个问题的任何建议？(PS,上面的HTML只是我的意思的一个例子,它不是我的实际模板.)

Answer 1

那是因为 ngIf 完全删除并重新创建了 DOM 中的元素。当使用 ngIf 删除元素时，它的作用域被破坏，并在元素恢复时创建一个新的作用域。在 ngIf 中创建的作用域使用原型继承从其父作用域继承。此外，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 内容而出现了许多观察者。我做了一个简单的plunker 来复制你的场景，但没有面对它。您可以检查并通过增加可用的镀铬插件和/或许多其他类似的方式减少观察家这样。只需谷歌一下，您就可以找到大量有用信息的宝藏，以提高您的应用程序的观察者数量。

好的，现在我明白了你在这里到底需要什么:) 看！这就是 angular 文档告诉我们的“特别注意应该使用强大的ng-switch，而不是几个相互排斥的 ng-show。” 关于“何时使用什么！！！”的好读物之一。因此，我希望如果您在这些实例中使用 ng-switch，则不会发生闪烁的按钮，或者我们可以通过使用指令初始化函数进行实例间通信来实现非常通用且无需担心当前范围的解决方案的脚手架. 看到这个，我以互斥的方式将类应用于多个按钮。