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
<!--StartFragment-->也就是说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中改变数据也会及时的映射到后台数据模型,真正的实现了双向数据绑定。