bootstrap 与 ngCloak

一、 bootstrap

1.自动初始化

Angular会在DOMContentLoaded事件中自动初始化,Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到,Angular会做以下事情:

加载与module相关的directive。

创建应用相关的injector(依赖管理器)。

以ng-app指定根节点,开始对DOM进行相关“编译”工作。换言之,可以将页面的其中一部分(非<html>)作为根节点,从而限制angular的作用范围

2.手动初始化

页面没有ng-app指令  使用angular.bootstrap()(

 angular.bootstrap(angular.element(document.getElementById(ID));

)方法 

如果页面有多个ng-app指令,只有第一个会起作用,其余的要手动bootstrap

二、ngCloak

在使用表达式{{}}时有时会出现闪烁的问题

1.使用ng-bind指令

2.使用ng-cloak指令

angular会在DOM加载完后去解析html view Template,在一些快速浏览器中会在angular解析之前dom就已经显示了所以就会出现闪烁的问题

使用ngCloak指令解决

<div class="ng-cloak" ng-cloak>{{angular}}</div>

angular在初始化的时候会在DOM的header中添加css代码。angular将带有ng-clock的的元素设置为display:none,隐藏掉,在等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,元素显示,这样就可以实现防止节点的闪烁。

<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>

使用ngCloak时有时还是会有闪烁问题:原因是浏览器的速度比angular在head中加入css的速度还快,在angular添加css代码之前dom就已经显示了。解决办法就是自己在header中添加自己的css代码

.ng-cloak{
    display:none;
}

 

posted on 2015-11-26 20:34  xinup  阅读(201)  评论(0编辑  收藏  举报

导航