双向数据绑定：顾名思义是两端或者两层之间的数据交互问题。从前端的角度来说就是，从控制层controller层到视图层view层，并且这种作用是相互的。我们都知道无论是什么样的应用，只要是WEB项目，都避不开浏览器，那么所有的请求行为都应该是从浏览器发出的，需要用户操作的请求，都是从前端的view层发出的，无论是增删改查等操作皆是如此。我们的controller层不但要通过服务器端来获取数据，还要将需要的数据展示到view层，而用户的view层操作，也都是需要通过controller层传递到服务端的，就前端而言这里的controller层指并非是服务器端的控制转发层，而是前端的js等代码控制片段。不论什么样的框架，单单HTML是无法完成与用户的交互的，只要建立在HTML之上的js核心控制层才能完成这种操作。简单的一个流程就是，controller层就是售货员，你把钱给售货员，售货员负责对物品的核对，只要在保证一段逻辑顺畅比如该物品有库存的情况下反馈给顾客。
1.angularjs双向数据绑定原理
记得之前讲到指令系统的时候，对于ng-model和ng-bind的描述的时候，就简单的介绍了一下双向数据绑定的原理，在这里再重新讲述一下。
之前我们说过angularjs的工作原理分为两个阶段，这两个阶段分别是编译阶段和链接阶段。
在编译阶段会有这么几部操作：
- 各大浏览器利用自己的API将angularjs中的指令模板解析到各自的DOM中，DOM将会作为angularjs的编译器的输入。
- 然后angularjs遍历所有的DOM节点，并将生成对应的ng指令以及用户自定义指令，这里主要讲到ng-model，ng-bind，{{}}这三种数据交互的指令。
在链接阶段angularjs会做这么几件事：
2.angularjs双向数据绑定对应的指令
指令有这么三种方式，ng-model，ng-bind，{{}}
三种的使用方式还是有很多区别的，简单的来说应用于html的DOM元素中可以根据该DOM元素中是否有value属性来区分一下。
2.1 ng-model
说明：该指令用于双向数据绑定
应用场景：常用于带有input的输入框，编辑和添加页面，来进行双向数据绑定。我们知道修改是一个从controller层到view层以及view层到controller层的应用场景，即需要将数据记性回显也需要将保存的数据传到controller层。添加也类似，因为有些表单项可能需要初始化一些值，来进行显示。
使用方式：
<html ng-app="main">
<head>
<script type="application/javascript">
angular.module("main",[])
.controller("$scope",function ($scope) {
$scope.inputValue = "jack"
})
</script>
</head>
<body ng-controller="mainController">
<input type="text" ng-model="inputValue"/>
</body>
</html>
注意问题：使用ng-model时建议定义数据格式为对象格式，指定改数据为对象属性。尤其在select中，有时会出现数据无法绑定的问题，这个大概是应为select会为每一个ng-repeat重新定义作用域，而导致无法绑定。
<html ng-app="main">
<head>
<script type="application/javascript">
angular.module("main",function ($scope) {
$scope.bean ={name:"jack",value:"java"};
})
</script>
</head>
<body ng-controller="mainController">
<input type="text" ng-model="bean.name"/>
</body>
</html>
2.2 ng-bind
说明：该指令用于单向数据绑定，只能从controller层到view层，不能从view层到controller层。
应用场景：用于不可编辑下的回显，比如input，笔者在这里不长使用该指令。
2.3 {{}}
说明：该指令用于单向数据绑定，只能从controller层到view层，不能从view层到controller。
应用场景：适用于没有value属性的DOM元素中，比如<span>{{}}</span>,<td>{{}}</td>,<p>{{}}</p>,<div></div>等诸如此类的DOM元素中。该指令的使用场景还是挺多的。
好了，关于双向数据绑定先讲到这里，下面讲到的是angularjs的路由机制。
原文链接：https://www.f2er.com/angularjs/146425.html