angular.js开发应用初始化时会遇见{{express}}闪烁问题。这个问题是应为JS去操作DOM,都会等待DOM加载完成造成的。

angular中为我们提供了ng-cloak来解决闪烁的方案，同时对于bing文字{{express}}我们也可以改为ng-bind来实现避免。

<div>{{hello allen}}</div>

那么ng-cloak的原理是如何解决这样一个bug的呢？

angualr在初始化时会给页面的head动态增加一行css代码，如下所示：

<style type="text/css">

　　@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){

　　　　display:none !important;

　　}

　　ng\:form{

　　　　display:block;

　　}

　　.ng-animate-shim{

　　　　visibility:hidden;

　　}

　　.ng-anchor{

　　　　position:absolute;

　　}

</style>

从上面的样式知道ng-clock属性或class元素被设置为display:none,在等到angular解析到带有ng-clock的节点时候，

会把attribute和class为ng-cloak的元素remove掉ng-cloak.这样就可以防止节点的的闪烁。

var ngCloakDirective = ngDirective({
   compile: function(element, attr) {
    attr.$set(‘ngCloak‘, undefined);
    element.removeClass(‘ng-cloak‘);
  }
});

如果浏览器渲染还比angular.js加入css还快的话，则直接在页面head中加入样式。

ngCloak实现Angular初始化闪烁问题的解决方法