AngularJS入门心得2——何为双向数据绑定

　　前言：谁说Test工作比较轻松，最近在熟悉几个case，差点没疯。最近又是断断续续的看我的AngularJS，总觉得自己还是没有入门，可能是自己欠前端的东西太多了，看不了几行代码就有几个常用函数不熟悉的。看过了大漠的视频，算是了解了AngularJS的一些优良特性。后来准备投身《AngularJS权威教程》，跟着它走，可是一来可能自己道行不够，二来，个人觉得这本书翻译的有些生硬以及一些瑕疵，比如：

　　（1）9.2节：在指令中适用自作用域

　　（2）9.2节：在指令中适用自作用域

　　当然，以上都是一些瑕疵，希望译著作者不要见怪哈^_^!

　　所以，在囫囵吞枣的看到第十章，我觉得先搁置至此，去ngnice看看。可能我还是需要一些概念上的输入，比如双向数据绑定、表达式、指令等等。

　　正文：今天主要介绍AngularJS双向数据绑定

　　1.理论介绍

　　什么是双向数据绑定？既然号称双向数据绑定，重点肯定在“双向”上了，显然，有双向必有单向，那两者有何区别，先看下面两幅图：

　　上图：单向绑定

　　它们将模板和数据合并起来加入到视图中去，如图表中所示。合并完成之后，从图中的流向可以看出，任何对数据模型或者相关内容的改变都不会自动反映到视图中去。而且用户对视图的任何改变也不会自动同步到数据模型中来。这意味着，开发者需要编写代码来保持视图与模板、模板与视图的同步，无疑增加了开发的工作量。

　　那么有没有可以自动实现这种双向机制的框架，有，请看：

　　下图：双向绑定

　　AngularJS的数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时，视图就能反映这种改变，反之亦然。

　　2. 代码演示

　　html:

<!doctype html>
<html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script>
</html>

　　js:

var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'};
]);

　　运行结果:Hello,Angular

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

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

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

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

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

　　html：

<!doctype html>
<html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><input ng-model="greeting.text"/><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script>
</html>

　　js（还是上例中的js）：

var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'};
]);

　　运行结果：

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

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

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

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

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

　　本想在本篇再介绍下AngularJS的表达式，限于时间和篇幅，留在下篇吧，如果觉得有用，记得点赞，同时本文也会推送到公众号：JackieZheng，欢迎关注哈^_^

　　本文链接：《AngularJS入门心得2——何为双向数据绑定》

　　如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。

友情赞助

如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。

　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信

AngularJS入门心得2——何为双向数据绑定相关推荐

AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
Angularjs进阶笔记（1）—不同类型的双向数据绑定
[摘要] Angularjs1.X中两种不同的双向数据绑定聊聊 Angularjs1.x中那些活见鬼的事情.一. html与Controller中的双向数据绑定html-Controller的双向数据 ...
4.AngularJS四大特征之二：双向数据绑定
AngularJS四大特征之二: 双向数据绑定 (1)方向一:把Model数据绑定到View上--此后不论何时只要Model发生了改变,则View中的呈现会立即随之改变!实现方法: {{ }}.ngB ...
AngularJS双向数据绑定实例
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Ang ...
【AngularJs】Angular双向数据绑定
1.什么是双向数据绑定双向数据绑定: Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面.即数据模型(Module)和视图(View)之 ...
AngularJS中的双向数据绑定
双向数据绑定双向数据绑定是指两个方向:从数据模型到视图,从视图到数据模型.AngularJS是一个MVC框架,控制器去修改数据模型,数据模型的变更会反应到视图上.视图上发生了数据的变化,是否能够自动 ...
AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）
这次来些稍微复杂点的功能需求: 1.在info旁边的输入框中输入数字,根据数字的多少来动态显示这部分输入框: 其中,check部分的输入框初始是没有的(当然,也可以有!): 2.每点击一次增加按钮,下 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
angularjs双向数据绑定原理解析
angularjs的双向数据绑定脏值(发生了变化的值)检查不等于定时轮询,而是特定事件触发才会执行只有指定事件触发后才会进入脏值轮询. - DOM事件,譬如用户输入文本,点击按钮等.(ng-cli ...

AngularJS入门心得2——何为双向数据绑定

AngularJS入门心得2——何为双向数据绑定相关推荐

最新文章

热门文章