您的位置：首页 > Web前端 > AngularJS

Angular 笔记系列（二）数据绑定

2016-06-17 17:08 591 查看
数据绑定这块儿没啥说的，简单两个例子带过了。

Hello World:

<!DOCTYPE html>
<html ng-app>
<head>

<title>Simple app</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>

</head>

<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>

</body>
</html>

这就是有趣的双向数据绑定，AngularJS 会记录数据模型所包含的数据在任何特定时间点的值，而不是原始值。当他认为某个值可能发生变化时，
就会运行自己的事件循环来检查这个值是否变脏，如果该值从上次事件循环之后发生了变化，则该值被认为是脏值。这也是 Angular 可以跟踪和响应应用变化的方式。

数据模型对象：这里是指$scope。它的属性可以被视图访问，也可以同控制器交互。


数据绑定的最佳实践：
由于 JS 本身的特点，以及他在引用和传值时的不同处理方式，通常认为，，在视图中通过对象的属性而非对象本身来进行数据绑定，是 Angular的最佳实践。

一个简单的计时器：


<!doctype html>


<html ng-app>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>

</head>

<body>

<div ng-controller="MyController">

<h1>Hello {{ clock.now }}!</h1>
</div>

<script type="text/javascript" src="js/app.js"></script>

</body>

</html>

//app.js


function MyController($scope) {

$scope.clock = {
now: new Date()

};
var updateClock = function() {

$scope.clock.now = new Date()
};

setInterval(function() {
$scope.$apply(updateClock);
　　　　　　},1000)

updateClock();
};


关于脏值检查相关请参考：

http://www.cnblogs.com/Slim-Shady/p/5217221.html


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航