如何在页面加载期间隐藏AngularJS中的表达式？

Question

我有以下代码，例如：

div {{count}}

然后在我的javascript中，它将被替换为值。

但是，不知何故，如果我刷新页面，{{count}}将首先显示在页面中，直到页面完全加载。

如何在页面加载期间隐藏它？

Answer 1

你有2个解决方案

<强>第一

您可以使用ng-bind

  

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

<div ng-bind="count"></div>

<强> SECOND

您可以使用ng-cloack

  

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

<div ng-cloack>{{count}}</div>

Answer 2

您可以使用ng-bind="count"或ng-cloak代替{{count}}

<div ng-bind="count"></div>

<div ng-cloak>{{count}}</div>

如果您使用ng-cloak，可能会面临一些视图闪烁问题。看看讨论here。

Answer 3

您可以使用ng-bind或ng-cloak。

E.g。 ：

<div> <span ng-bind="count"></span> </div>

<div ng-cloak>{{count}}</div>

Answer 4

使用ng-cloack，它是为了防止您的问题而创建的，名为FUOC（Flash of Unstyled Content）：

<div ng-cloak>{{count}}</div>