angular js 数据双向绑定 -优快云博客

1	<!doctype html>
2	<html ng-app="MyModule">
3	<head>
4	<meta charset="utf-8">
5	</head>
6	<body>
7	<div ng-controller="HelloAngular">
8	<p>{{greeting.text}},Angular</p>
9	</div>
10	</body>
11	<script src="js/angular-1.3.0.js"></script>
12	<script src="HelloAngular_MVC.js"></script>
13	</html>

1	var myModule = angular.module('MyModule', []);
2	myModule .controller('HelloAngular', ['$scope',
3	$scope.greeting = {
4	text: 'Hello'
5	};
6	]);
7

运行结果:Hello,Angular

解读：这里的"{{}}"相当于"ng-model"指令，其实就是一种绑定，但是仅从这个例子，不能说实现了双向数据绑定。这里是将AngularJS的数据模型（Model）的值绑定到了视图（View）上了，如果html文件中没有引入

1	<script src="HelloAngular_MVC.js"></script>

则通过运行发现界面实现的是：{{greeting.text}},Angular

也就是说AngularJS的scope中的模型值没有绑定到前台界面html中。反之，引入了HelloAngular_MVC.js，则实现在前端界面中映射到了数据模型数据。

上面介绍的不能算是双向数据绑定，下面引出真正的双向绑定，那么双向数据绑定有何应用场景，什么样的情况需要数据模型与视图能够相互映射相互影响呢，可能是你没有察觉，现在很多的网站都能看到这种思想带来的极大便捷，比如说表单，在填写或提交表单时，界面上会根据用户的操作做出及时的相应，这就是一种双向数据绑定的最有力的应用场景。

1	<!doctype html>
2	<html ng-app="MyModule">
3	<head>
4	<meta charset="utf-8">
5	</head>
6	<body>
7	<div ng-controller="HelloAngular">
8	<input ng-model="greeting.text"/>
9	<p>{{greeting.text}},Angular</p>
10	</div>
11	</body>
12	<script src="js/angular-1.3.0.js"></script>
13	<script src="HelloAngular_MVC.js"></script>
14	</html>

1	var myModule = angular.module('MyModule', []);
2	myModule .controller('HelloAngular', ['$scope',
3	$scope.greeting = {
4	text: 'Hello'
5	};
6	]);
7

运行结果：

注意：这个例子很好地诠释了什么是双向绑定。

首先在html中声明了两个标签：一个输入框<input>和一个段落标记<p>。

显然采用了两种绑定的方式：{{}}和ng-model，但是功能都是数据绑定，与js文件中控制器中的greeting.text进行了绑定。所以，通过js中greeting.text的赋值会使得前台Html中input和p同时显示“Hello”

这一步完成的是AngularJS的scope中的数据模型绑定了的前台View中，那么前台的数据变化是否会影响到数据模型，通过改变input中的值，我们得到结果：

在输入框中的任何输入都会及时的反应在下面的段落中，这也说明了在Html中改变数据也会及时的映射到后台数据模型，真正的实现了双向数据绑定。