自定义ngCloak

Posted 2020-10-10 HelloHello233

场景：

　　一个非常复杂的表单页面，页面有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);
})();