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

行如风 Angular 初识5

时间:2017-04-20 21:49:32      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:angular

 

今天说一下关于AngularJs闪屏问题和使用对象扩充数据遍历,直接上代码:

(一)、闪屏问题

    首先要知道是什么原因会造成闪屏问题,大家都知道数据绑定会有2种写法(此处的2种不包括表单的数据绑定),即ng-bind{{xxx}}的写法,

    比如以下代码

<div>{{name}}</div><div   ng-bind=”name”></div>

这两种都可以绑定数据,但是{{name}}在页面刷新时Web渲染的时候还会显示{{name}},然后当Angularjs的内容被读完之后,Angular才会处理{{name}}的内容,比如$scope.name=”你好”;Angular被加载之后{{name}}才会变为你好,所以会有闪屏的现象。但是用指令ng-bind=”name”不会出现闪屏,因为指令实在标签属性里不会显示在页面当中,虽然这两者都是在Angular加载完成之后才会再渲染相应的内容,效果却不一样。

那这样大家可能回想,那以后大家都用指令来绑定不就行了吗?但是指令是写在标签的属性里,如果要绑定的名称很长{{zxcvbmdashkeqw}}或者还要在指令里面做运算+-*/..等等,这会导致标签的属性过于冗余,不是理想的解决方法,所以大家可以这样写

<style>
    .ng-cloak{display:none;}
</style>
<div ng-app="hd" ng-cloak ng-controller="ctrl" class="ng-cloak">          {{name}}
</div>

class="ng-cloak"就是解决闪屏问题的关键指令,要保证style里面有对应的样式,还要保证在对应模块的标签里要有class="ng-cloak",这样就完美解决了,原理是这个模块会在Angular将这个模块渲染完之后再显示模块内的数据。J

(二)、对象扩充和数据遍历

直接撸代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" >
		<title></title>
		<style>
			.ng-cloak{display: none;}
		</style>
	</head>
	<body>
		<div ng-app="hd" ng-cloak ng-controller="ctrl" class="ng-cloak"><!--要想效果一样必须class名称是ng-cloak-->
			<div ng-repeat="(key, value) in data">
				{{key}} -- {{value}}
			</div>
			
		</div>
		
	</body>
</html>
<script type="text/javascript" src="js/angular.js" ></script>
		<script>
			var m=angular.module(‘hd‘,[]);
			m.controller(‘ctrl‘,[‘$scope‘,function($scope){//[]里的$scope为依赖注入
			//	函数使用对象扩充
//			var obj={‘name‘:‘后盾网‘};
//			angular.extend(obj,{url:‘houdunwang.com‘,web:‘后盾人‘})
//			console.log(obj);
			//	数据遍历数组
//			$scope.data=[{name:‘后盾网‘,url:‘houdunwang.com‘},{name:‘后盾人‘,url:‘houdunren.com‘}]
//			angular.forEach($scope.data,function(v,k){
//				console.log(v,k);
//				v.url=‘www.‘+v.url;
//			});
			//	数据遍历对象
			$scope.data={name:‘后盾网‘,url:‘houdunwang.com‘};
			angular.forEach($scope.data,function(v,k){
				console.log(v,k);
			})
			
			
			
			}]);
		</script>

本文出自 “学习改变命运” 博客,请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1917876

行如风 Angular 初识5

标签:angular

原文地址:http://itzhongxin.blog.51cto.com/12734415/1917876

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