AngularJs加载闪烁问题 ng-cloak
2016-05-24 09:52
549 查看
1.在使用AngularJs时当页面中有表单或AngularJs代码加载延迟会出现闪烁的问题
解决方法,是使用ng-cloak指令
定义和用法:
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。
ng-cloak 指令没有参数。
实例:
<div ng-app="">
<p ng-cloak>{{ 5 + 5 }}</p>
</div>
实例2:
在使用ng-show 的时候如果页面中有form表单也会有闪烁现象
<span style="color:#333333;"><div class="container" id="md5Result" >
<div class="row">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"> 加密结果:</h3>
</div>
<div class="panel-body" </span><strong><span style="color:#ff0000;"> ng-cloak</span></strong><span style="color:#333333;">>
<div class="list-group" ng-show="showResult" style="margin:1% 2%;">
<div class="list-group-item">
<b> 32位大写:</b>
{{result.UpperCase32}}
</div>
<div class="list-group-item">
<b> 32位小写:</b>
{{result.LowwerCase32}}
</div>
<div class="list-group-item">
<b> 16位大写:</b>
{{result.UpperCase16}}
</div>
<div class="list-group-item">
<b> 15位大写:</b>
{{result.LowwerCase16}}
</div>
</div>
<div class="center-block">
{{result.msg}}
</div>
</div>
</div>
</div>
</div></span>
解决方法,是使用ng-cloak指令
定义和用法:
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。
ng-cloak 指令没有参数。
实例:
<div ng-app="">
<p ng-cloak>{{ 5 + 5 }}</p>
</div>
实例2:
在使用ng-show 的时候如果页面中有form表单也会有闪烁现象
<span style="color:#333333;"><div class="container" id="md5Result" >
<div class="row">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"> 加密结果:</h3>
</div>
<div class="panel-body" </span><strong><span style="color:#ff0000;"> ng-cloak</span></strong><span style="color:#333333;">>
<div class="list-group" ng-show="showResult" style="margin:1% 2%;">
<div class="list-group-item">
<b> 32位大写:</b>
{{result.UpperCase32}}
</div>
<div class="list-group-item">
<b> 32位小写:</b>
{{result.LowwerCase32}}
</div>
<div class="list-group-item">
<b> 16位大写:</b>
{{result.UpperCase16}}
</div>
<div class="list-group-item">
<b> 15位大写:</b>
{{result.LowwerCase16}}
</div>
</div>
<div class="center-block">
{{result.msg}}
</div>
</div>
</div>
</div>
</div></span>
相关文章推荐
- Angular的问题【学习angular的,建议看看】
- Angular 怎么在加载中加入 Loading 提示框
- AngularJs(二)设计思想和常用功能
- angular run()运行块
- 表单验证<AngularJs> form valid
- angularjs 实现国际化
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- AngularJs轮询器写法
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
- AngularJS上拉加载问题解决方法
- angular - filter(自定义)
- AngularJS进阶(三十八)上拉加载问题解决方法
- AngularJS进阶(三十八)上拉加载问题解决方法
- angularjs事件指令--ngClick、ngDbclick、ngCut、ngChange、ngKeydown...
- AngularJS jqLite详情
- angularjs学习笔记—事件指令
- AngularJS 的常用特性(五)
- AngularJS 的常用特性(四)
- AngularJS 的常用特性(三)
- AngularJS $route路由