AngularJS 使用 ng-cloak 防止未渲染模板内容输出

问题描述

今天使用 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


阅读全文 »