问题描述

今天使用 AngularJS 时遇到这样的问题：模板中绑定的数据需要在加载页面时，调用$http服务向服务器索取，然后绑定 model 来刷新 view。但是页面（也即 HTML DOM）是先于 AngularJS 的模板渲染而加载完成的，这就造成一个问题，未完成数据绑定的模板表达式（比如{{}}中的内容）被原样打印出来。当然这只是临时性的展示，当 Ajax 请求结束并完成数据绑定后，页面会自动刷新，表达式也被正确的数据替换。但是这个临时性的页面还是很不给力（当然可以使用ng-bind代替{{}}表达式，但是遇到ng-repeat的 li 时，列表会显示一个 li，依然很丑陋），所以开始找解决方案。

解决方案

通过 Google，发现大家提供的解决方案主要有两种：一是使用ng-show/ng-hide来解决，二是使用ng-cloak来解决。查阅文档后，感觉这两种方法的解决思路是一样的，仅介绍第二种方法，也是官方文档给出的解决方法。

官方对ng-cloak标签的定义如下：

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

定义指出，该标签本质是一个 directive。AngularJS 会为每个添加了该标签的块添加ng-cloak这个 class，然后自定义这个 class，使得添加该 class 的块的 display 属性为 none，从而隐藏该块的内容。当 AngularJS 渲染完成后，会自动在整个 DOM 中寻找打了该标签的块，并去掉他们的ng-cloak标签，也即去除了他们的ng-cloak这一 class，从而使隐藏的内容重新显示（此时已是渲染完成的DOM）。

需要注意的是，实现这一点需要将 AngularJS 的 JS 加载放在文档的头部，或者将ng-cloak的 class 定义放在外部 css 文件中，二者选一。

附ng-cloak的 css 代码（引自官方文档）：

打完收工。

参考文章：

1. Google group：https://groups.google.com/forum/#!topic/angular/1mJDBBr0dug
2. AngularJS文档：https://docs.angularjs.org/api/ng/directive/ngCloak