自定义ngCloak

场景：

　　一个非常复杂的表单页面，页面有5个标签，第五个标签中又有5个标签，也就是说一共有9个标签，每个标签中都有一个表单，表单之间相互关联、所有表单项（包括复合的），有80多个数据。全部东西写在一个html内。当电脑机器比较慢的时候，ng没启动完全时，会有短暂的页面混乱，表达式，花括号等，解决这个问题使用ngcloak，但混乱就变成了一片空白，这也不是我想要的。打算使用第三方的弹窗来暂时顶替这片空白，但是没什么好办法可以通过js来知道ng是否渲染完。唯一知道的是渲染完之后ngcloak类会被去除。我就根据这个特点来写了一个纯粹基于css的遮蔽层。

　　任何使用了ng的页面，只要引入下面的js文件，就会有遮蔽层了

/**
 * Created by liwenjun on 2017/9/5.
 *
 * ngCloak过渡层
 */

(function(){
    var html = '<style> 
    #lloading{ 
        z-index: 9999999999999;
        top: 0; 
        left: 0; 
        position: fixed; 
        transition: opacity 1s ease,width .1s ease 1s,height .1s ease 1s; 
        opacity: 0; 
         0; 
        height: 0; 
    } 
    #lloading[ng-cloak]{ 
         100%; 
        height: 100%; 
        opacity: 1; 
        top: 0; 
        left: 0; 
        display: table !important; 
        text-align: center; 
    } 
    #lloading .bg{ 
        position: absolute; 
        background-color: #333; 
        opacity: .3; 
        height: 100%; 
         100%; 
    } 
    #lloading .icon{ 
        vertical-align:middle; 
        display:table-cell; 
    } 
    </style> 
 
    <div id="lloading" ng-cloak> 
    <div class="bg"></div> 
        <div class="icon">加载中...</div> 
    </div>' ;

    document.write(html);
})();