码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 与 ngCloak

时间:2015-11-26 21:20:23      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

一、 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;
}

 

bootstrap 与 ngCloak

标签:

原文地址:http://www.cnblogs.com/xinup/p/4998849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!