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中改变数据也会及时的映射到后台数据模型，真正的实现了双向数据绑定。
相关推荐
Angular JS数据的双向绑定 接触AngularJS许了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。 初步大致有以下几个方面： ...
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。 一个最简单的示例就是这样： <span ng-bind=counter></span> <button ng-click=counter++&...
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。本文给大家详细介绍js双向数据绑定，感兴趣的朋友参考下
本文主要介绍了jquery,js简单实现类似Angular.js双向绑定的方法。具有一定的参考价值，下面跟着小编一起来看下吧
我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:...
angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。 下面的demo演示： <!DOCTYPE ...
许多流行的javascript框架，像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传。这并不意味着从头开始实现它很难，也不意味着当我们需要这种功能的时候，使用这些框架是我们唯一的...
今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了AngularJS中数据的双向绑定机制,双向绑定使得HTML中呈现的view与AngularJS中的数据一致,是Angular的重要特性之一,需要的朋友可以参考下
angular.js由谷歌开发简化了前端开发，实现数据双向绑定支持MVC模式。
Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情。 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定，在开发中非常常见，也是Angularjs1.x的宣传点之一，使用中并...
angular的双向绑定实在是有点精深，本次探索只实现了文本的双向绑定。 View-Model 先看效果：文本框输入内容,model层数据也同步过来了 Model-View 先看效果：js改变model层数据，视图也立即随之变化 上我的demo ...
这就实现了数据双向绑定。 二.取值表达式与ng-bind的使用 我们再看一个例子，点击这里，文中出现的第一个例子中，{{greeting.text}}和{{text}}就是一个取值表达式了，但是如果你一直刷新页面，你会发现这样一个...
那么什么是双向绑定，下面简单进行讲解。 首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且...
AngularReact 绑定 双向数据绑定示例（Angular => React 和 React => Angular）
主要介绍了AngularJS学习笔记（三）数据双向绑定的简单实例，详解数据双向绑定实例的相关资料,需要的朋友可以参考下。
vue.js如何实现数据的双向绑定呢？ 与angular不同。 vue利用的是es5的defineproperty特性。 1.一个小例子 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title><...