自定义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; \
        width: 0; \
        height: 0; \
    } \
    #lloading[ng-cloak]{ \
        width: 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%; \
        width: 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);
})();