解决AngularJS初始化闪现问题

问题

使用ng-hide隐藏的弹框，在页面初始化、刷新的时候会闪现一次，然后才会hide。

原因

AngularJS需要在DOM加载完和javascript加载完后才会AngularJS的触发绑定和渲染工作。也就是说，

因为在加载angularjs之前会先渲染dom结构和js，而模态框涉及到了dom操作，所以会在angularjs还没加载完，dom已经加载完成后，出现。等angularjs加载完成了就会执行ng-hide，消失。这样就出现了闪现。

解决方法

1.ng-bind

ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind渲染的空元素代替{{ }}的形式绑定元素到页面上；

这个常会用在绑定变量的时候。

2.ng-cloak

该指令是angularjs的内置的指令，它的作用是隐藏所有被它包含的元素。我们可以使用ng-clock属性或设置ng-cloak样式来防止闪现问题。

其工作原理是：

ng-clock会在html页面上的head中添加这个样式，使得没渲染的div隐藏。

<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}  </style>

3.resolve

当在不同的页面之间使用routes（路由）的时候，我们有另外的方式防止页面在数据被完全加载到route之前被渲染。

在route（路由）里使用resolve可以让我们在route（路由）被完全加载之前获取我们需要加载的数据。当数据被加载成功之后，路由就会改变而页面也会呈现给用户；数据没有被加载成功route就不会改变， the $routeChangeError event will get fired.【$routeChangeError事件就（不）会被激活？】

resolve详细介绍                 看着比较复杂没仔细看

4.上边方法都解决不了

  然而这两个方案都不理想。那么

   方案：在样式表中增加一个ng-cloak的css代码，内容同AngularJS动态创建的一致，在head中静态加载

  如果上边的方案还是解决不了复杂的界面，比方像我的弹框列表。那么

  可以用angular操作dom来添加class，一开始是display:none,点击后可以是display:block

$scope.modalAssChange = function(vultop){
     if(vultop){
          $scope.vulAssList = vultop.assetData;
          angular.element(document.getElementById("vulAsslist")).removeClass('hideModal').addClass('showModal');
      }else{
          angular.element(document.getElementById("vulAsslist")).removeClass('showModal').addClass('hideModal');
      }
}

这就涉及到了angularjs的dom操作    angular.element()的详细介绍