自定义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); })();