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

最新推荐文章于 2018-10-15 09:16:04 发布

iteye_11116

最新推荐文章于 2018-10-15 09:16:04 发布

阅读量219

点赞数

分类专栏： AngularJs 文章标签： ng-cloak

本文链接：https://blog.csdn.net/iteye_11116/article/details/82678650

版权

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。