解决使用angularjs时页面因为{{ }}闪烁问题的两种方式ngBind,ngCloak

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决使用angularjs时页面因为{{ }}闪烁问题的两种方式ngBind,ngCloak相关的知识,希望对你有一定的参考价值。

1.html加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被当作子文本节点渲染到含有ng-bind指令的元素内。 
2.除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令,ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。 

 下面主要演示下如何通过ng-cloak避免FOUC

<body ng-init="greeting=‘HelloWorld‘">     
    <p ng-cloak>{{ greeting }}</p> 
</body>

 

以上是关于解决使用angularjs时页面因为{{ }}闪烁问题的两种方式ngBind,ngCloak的主要内容,如果未能解决你的问题,请参考以下文章

Ng-cloak解决angularJs中的闪烁问题

解决vue解析出现闪烁

vue 解析时表达式闪烁的问题

Angular.js中处理页面闪烁的方法详解

AngularJS ng-cloak 不会阻止 Mean.js 中的代码闪烁

使用vue时会出现加载渲染页面时闪烁问题