行如风 Angular 初识5
发布时间：2020-12-17 09:22:32 所属栏目：安全 来源：网络整理
导读：今天说一下关于 AngularJs 的 闪屏问题 和使用 对象扩充 和 数据遍历 ，直接上代码： （一）、闪屏问题 首先要知道是什么原因会造成闪屏问题，大家都知道数据绑定会有 2 种写法（此处的 2 种不包括表单的数据绑定），即 ng-bind 和 {{xxx}} 的写法， 比如以
|
今天说一下关于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>
<divng-app="hd"ng-cloakng-controller="ctrl"class="ng-cloak">{{name}}
</div>
class="ng-cloak"就是解决闪屏问题的关键指令，要保证style里面有对应的样式，还要保证在对应模块的标签里要有class="ng-cloak"，这样就完美解决了，原理是这个模块会在Angular将这个模块渲染完之后再显示模块内的数据。J （二）、对象扩充和数据遍历 直接撸代码： <!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport">
<title></title>
<style>
.ng-cloak{display:none;}
</style>
</head>
<body>
<divng-app="hd"ng-cloakng-controller="ctrl"class="ng-cloak"><!--要想效果一样必须class名称是ng-cloak-->
<divng-repeat="(key,value)indata">
{{key}}--{{value}}
</div>
</div>
</body>
</html>
<scripttype="text/javascript"src="js/angular.js"></script>
<script>
varm=angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){//[]里的$scope为依赖注入
// 函数使用对象扩充
// varobj={'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,k){
console.log(v,k);
})
}]);
</script> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |