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

引言

        上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题，这次我们来使用另一种方法解决一下。

         在使用angularjs开发评教移动端的时候，我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于Javascript去操作DOM，都会等待DOM加载完成之后。同样，anguarjs等DOM加载完成之后才回去解析html，所以浏览器上会出现闪烁的情况。

         解决这个问题，其实angularjs给了一个指令——ng-cloak。我们可以在需要的地方加上这个指令就可以。

    
    



    
直接输出字符串字面值
    Hello {{"World"}}
    

原理

         Ng-cloak实现原理为：页面初始化是在DOM的header增加一行css代码。

          Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候，会把元素上ng-cloak  attribute和calss同时remove掉，这样就防止了节点的闪烁。

总结

           所有的事情都像老师说的那样：方法总比问题多！