Javascript 按钮'；闪烁'；在角度应用中使用ng if或ng show

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

<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斗篷解决的问题，ng斗篷只是为了防止angular在发挥其魔力之前显示模板

---

考虑到我在两个大型角度应用程序中都遇到过这个问题，这一定是一个常见问题。关于如何解决这一问题，有什么建议吗？（请注意，上面的HTML只是我的意思的一个示例，它不是我的实际模板。）

这是因为ngIf完全删除并重新创建DOM中的元素。使用ngIf删除元素时，其作用域将被销毁，并在还原元素时创建新的作用域。在ngIf中创建的作用域使用原型继承从其父作用域继承。此外，ngIf使用元素的编译状态重新创建元素

实际上，让ngIf求值为false将删除该元素。但只有在它没有立即设置为true之后，因为只有在它有机会刷新DOM（您的HTML）时，即在当前同步代码块之后，才会刷新DOM（您的HTML）

以下代码段没有任何效果：

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

请注意，这可能是由于您的angular应用程序由于大量DOM内容而出现了许多观察家。我制作了一个plunker来复制您的场景，但没有面对它。您可以通过添加可用的chrome插件和/或其他许多类似的方式来检查和减少观察者。只要在谷歌上搜索一下，你就可以找到一个宝库，里面有很多丰富的信息，可以提高你应用程序的观察者数量

---

好的，现在我得到了你所需要的：）看！！这是angular docs告诉我们的“特别要注意强大的ng开关，它应该被用来代替几个相互排斥的ng节目。”阅读“何时使用什么！！！”中的一个。因此，如果您在这些实例中使用ng开关，我希望不会出现闪烁按钮，或者，我们可以通过使用指令初始化功能进行实例间通信，实现非常通用的解决方案框架，而不必担心当前范围。请参见我以互斥方式将类应用于多个按钮的示例

下面的ng if语句确保它一次显示一个。如果您同时看到这两个字段，应该是因为代码中的某些内容干扰了角度摘要循环，从而延迟了字段的双向绑定和按钮的呈现

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

标志
完成

谢谢你的回答，但我确实理解摘要周期。我想确定的是，当您有两个相互排斥的ng IF时，如何确保一次只显示一个元素。@请看清楚，我已根据您的评论编辑了我的答案。我希望它现在能为您解决问题。另外，如果可能的话，请您构建一个小的plunker或JSFIDLE来复制您的闪烁按钮范例，以便快速解决问题，这将是一个额外的优势。@请您尝试在按钮上使用seesharper，以防止html模板被短暂显示。否决，因为我明确指出上述代码显示了闪烁问题，但没有提供解决方案。

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