前言：谁说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的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。

　　

 

AngularJS入门心得2——何为双向数据绑定的更多相关文章

  1. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  2. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  3. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  4. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  5. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  6. [转载]AngularJS入门教程04：双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  7. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  8. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  9. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

随机推荐

  1. xxxx年度员工岗位技能调查表

    昨天应公司要求设计了一张 <员工岗位技能调查表>,写微博有2个目的:第一是供大家参考,第二是记录下从事质量管理工作走过的点点滴滴.这是我第一次写工作方面的博客,之后会坚持写下去的. --- ...

  2. 【C-分支结构】

    一.关系运算符 双目运算符 自左向右结合 关系运算符的优先级低于算术运算符,高于赋值运算符 <(小于) <=(小于或等于) >(大于) >=(大于或等于) ==(等于) !=( ...

  3. 申请Google API Key

    想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclips ...

  4. pthread——pthread_cleanup

    Pthread_cleanup用于注册线程清理函数,注册的清理函数将在线程被取消或者主动调用pthread_exit时被调用:     一个简单的示例: #include <pthread.h& ...

  5. Groonga 3.0.8 发布，全文搜索引擎

    Groonga 3.0.8 改进了管理界面的可用性,支持 groonga_query_log_path 指令(groonga-httpd) 提供基于 nginx 的 HTTP 服务功能,改进了 del ...

  6. TJ/T808 终端通讯协议设计与实现(码农本色）

    由于公司项目涉及到相关技术,对于平常写WEB的技术人员来说对这人来说比较默生:为了让下面的技术人员更好地对这个协议的实施,所以单独针对这个协议进行了分析和设计,以更于后期更好指导相关开发工作.由于自己 ...

  7. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  8. 记录排查解决Hubble.Net连接Oracle数据库建立镜像库数据丢失的问题

    起因 前几天在弄Hubble连接Oracle数据库,然后在mongodb中建立一个镜像数据库; 发现一个问题,原本数据是11W,但是镜像库中只有6w多条; 刚开始以为是没运行好,又rebuild了一下 ...

  9. 初识jsonp

    jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案.很多时候我们需要在客户端获取服务器数据进行操作,一般我们会使用ajax+webservice做此事,但是如 ...

  10. NanoProfiler - 适合生产环境的性能监控类库 之 实践ELK篇

    上期回顾 上一期:NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇 上次介绍了NanoProfiler的大数据分析理念,一晃已经时隔一年多了,真是罪过! 有朋友问到何时开源的问题 ...