第二章-数据绑定和第一个AnglarJS Web应用

Angularjs中的数据绑定 

AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最最重要的功能之一,要实现 这个功能,只要在HTML页面中引用angular.js,并在某个DOM元素上明确设置ng-app属性即可。ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AnugularJS影响。 

 

简单的数据绑定 

数据模型对象是指$scope对象。$scope对象是一个简单的javascript对象,其中的属性可以被视图访问,也可以同控制器进行交互。 

 

双向绑定意味着如果视图改变了某个值,数据模型会通过脏检查观察这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。 

 

DOM元素上的ng-controller声明所有被包含的元素都属于某个控制器。 

<div ng-controller='myController'> 

 <input ng-model="person.name" type="tesxt"> 

 <h1>Hello{{person.name}}</h1> 

</div> 

 

function myController($scope,$timeout){ 

 var updateClock=funtion(){ 

$scope.clock=new Date(); 

$timeout(updateClock,1000);  

 }; 

 

 updateClock(); 

} 

数据绑定的最佳实践 

转载于:https://www.cnblogs.com/MiaoXin/p/5916532.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值