ng-cloak防止页面闪烁并且出现没有渲染的符号

最新推荐文章于 2020-12-19 23:55:15 发布

原创最新推荐文章于 2020-12-19 23:55:15 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ng-cloak

AngularJs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 AngularJS 的 ng-bind 和 ng-cloak 指令解决页面加载时未渲染内容的闪烁问题（Flash of Unrendered Content, FOUC）。通过这两种方法可以有效地提升用户体验。

10. ng-bind
尽管可以在视图中使用{{ }}模板语法（AngularJS内置的方式），我们也可以通过ng-bind
指令实现同样的行为。
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
在线示例： http://jsbin.com/esihUJ/1/edit。
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁（Flash of
Unrendered Content， FOUC）。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内。
11. ng-cloak
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。