双向数据绑定：顾名思义是两端或者两层之间的数据交互问题。从前端的角度来说就是，从控制层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会做这么几件事：

angularjs在链接阶段会为每一个ng-model，ng-bind，{{}}生成一个对应的$witch对象，并将该$witch加入到$witch队列中。
当用户操作改变数据时，$digest会遍历整个$witch列表，来去监听每个数据是否发生变化。当$digest监听到$witch列表中没有数据发生变化之后，更新到DOM中。

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.jb51.cc/angularjs/146425.html

angualrjs双向数据绑定

1.angularjs双向数据绑定原理

2.angularjs双向数据绑定对应的指令

2.1 ng-model

2.2 ng-bind

2.3 {{}}

相关推荐