深入学习AngularJS中数据的双向绑定机制
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致.
AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.
在html中:
<body ng-app="ngApp"> <div ng-controller="ngCtl"> <label ng-model="myLabel"></label> <input type="text" ng-model="myInput" /> <button ng-model="myButton" ng-click="btnClicked"></button> </div> </body>
在js中:
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.
这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.
这样的方式,使用起来真的非常方便. 我们仅关心HTML标签的样式, 及其对应在js中angular controller作用域下绑定的属性和方法. 仅此而已, 将众多复杂的DOM操作全都省略掉了.
这样的思想,其实跟jQuery的DOM查询和操作是完全不一样的, 因此也有很多人建议用AngularJS的时候,不要混合使用jQuery. 当然, 二者各有优劣, 使用哪个就要看自己的选择了.
NG中的app相当于一个模块module, 在每个app中可以定义多个controller, 每个controller都会有各自的作用域空间,不会相互干扰.
绑定数据是怎样生效的
初学AngularJS的人可能会踩到这样的坑，假设有一个指令：
var app = angular.module("test", []);
app.directive("myclick", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.counter++;
});
};
});
app.controller("CounterCtrl", function($scope) {
$scope.counter = 0;
});
<body ng-app="test">
<div ng-controller="CounterCtrl">
<button myclick>increase</button>
<span ng-bind="counter"></span>
</div>
</body>
这个时候，点击按钮，界面上的数字并不会增加。很多人会感到迷惑，因为他查看调试器，发现数据确实已经增加了，Angular不是双向绑定吗，为什么数据变化了，界面没有跟着刷新？
试试在scope.counter++;这句之后加一句scope.digest();再看看是不是好了？
为什么要这么做呢，什么情况下要这么做呢？我们发现第一个例子中并没有digest，而且，如果你写了digest，它还会抛出异常，说正在做其他的digest，这是怎么回事？
我们先想想，假如没有AngularJS，我们想要自己实现这么个功能，应该怎样？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>two-way binding</title>
</head>
<body onload="init()">
<button ng-click="inc">
increase 1
</button>
<button ng-click="inc2">
increase 2
</button>
<span style="color:red" ng-bind="counter"></span>
<span style="color:blue" ng-bind="counter"></span>
<span style="color:green" ng-bind="counter"></span>
<script type="text/javascript">
/* 数据模型区开始 */
var counter = 0;
function inc() {
counter++;
}
function inc2() {
counter+=2;
}
/* 数据模型区结束 */
/* 绑定关系区开始 */
function init() {
bind();
}
function bind() {
var list = document.querySelectorAll("[ng-click]");
for (var i=0; i<list.length; i++) {
list[i].onclick = (function(index) {
return function() {
window[list[index].getAttribute("ng-click")]();
apply();
};
})(i);
}
}
function apply() {
var list = document.querySelectorAll("[ng-bind='counter']");
for (var i=0; i<list.length; i++) {
list[i].innerHTML = counter;
}
}
/* 绑定关系区结束 */
</script>
</body>
</html>
可以看到，在这么一个简单的例子中，我们做了一些双向绑定的事情。从两个按钮的点击到数据的变更，这个很好理解，但我们没有直接使用DOM的onclick方法，而是搞了一个ng-click，然后在bind里面把这个ng-click对应的函数拿出来，绑定到onclick的事件处理函数中。为什么要这样呢？因为数据虽然变更了，但是还没有往界面上填充，我们需要在此做一些附加操作。
从另外一个方面看，当数据变更的时候，需要把这个变更应用到界面上，也就是那三个span里。但由于Angular使用的是脏检测，意味着当改变数据之后，你自己要做一些事情来触发脏检测，然后再应用到这个数据对应的DOM元素上。问题就在于，怎样触发脏检测？什么时候触发？
我们知道，一些基于setter的框架，它可以在给数据设值的时候，对DOM元素上的绑定变量作重新赋值。脏检测的机制没有这个阶段，它没有任何途径在数据变更之后立即得到通知，所以只能在每个事件入口中手动调用apply()，把数据的变更应用到界面上。在真正的Angular实现中，这里先进行脏检测，确定数据有变化了，然后才对界面设值。
所以，我们在ng-click里面封装真正的click，最重要的作用是为了在之后追加一次apply()，把数据的变更应用到界面上去。
那么，为什么在ng-click里面调用$digest的话，会报错呢？因为Angular的设计，同一时间只允许一个$digest运行，而ng-click这种内置指令已经触发了$digest，当前的还没有走完，所以就出错了。
$digest和$apply
在Angular中，有$apply和$digest两个函数，我们刚才是通过$digest来让这个数据应用到界面上。但这个时候，也可以不用$digest，而是使用$apply，效果是一样的，那么，它们的差异是什么呢？
最直接的差异是，$apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。所以，一般在集成非Angular框架的代码时，可以把代码写在这个里面调用。
var app = angular.module("test", []);
app.directive("myclick", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.counter++;
scope.$apply(function() {
scope.counter++;
});
});
};
});
app.controller("CounterCtrl", function($scope) {
$scope.counter = 0;
});
除此之外，还有别的区别吗？
在简单的数据模型中，这两者没有本质差别，但是当有层次结构的时候，就不一样了。考虑到有两层作用域，我们可以在父作用域上调用这两个函数，也可以在子作用域上调用，这个时候就能看到差别了。
对于$digest来说，在父作用域和子作用域上调用是有差别的，但是，对于$apply来说，这两者一样。我们来构造一个特殊的示例：
var app = angular.module("test", []);
app.directive("increasea", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.a++;
scope.$digest();
});
};
});
app.directive("increaseb", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.b++;
scope.$digest(); //这个换成$apply即可
});
};
});
app.controller("OuterCtrl", ["$scope", function($scope) {
$scope.a = 1;
$scope.$watch("a", function(newVal) {
console.log("a:" + newVal);
});
$scope.$on("test", function(evt) {
$scope.a++;
});
}]);
app.controller("InnerCtrl", ["$scope", function($scope) {
$scope.b = 2;
$scope.$watch("b", function(newVal) {
console.log("b:" + newVal);
$scope.$emit("test", newVal);
});
}]);
<div ng-app="test">
<div ng-controller="OuterCtrl">
<div ng-controller="InnerCtrl">
<button increaseb>increase b</button>
<span ng-bind="b"></span>
</div>
<button increasea>increase a</button>
<span ng-bind="a"></span>
</div>
</div>
这时候，我们就能看出差别了，在increase b按钮上点击，这时候，a跟b的值其实都已经变化了，但是界面上的a没有更新，直到点击一次increase a，这时候刚才对a的累加才会一次更新上来。怎么解决这个问题呢？只需在increaseb这个指令的实现中，把$digest换成$apply即可。
当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。
因此，从性能上讲，如果能确定自己作的这个数据变更所造成的影响范围，应当尽量调用$digest，只有当无法精确知道数据变更造成的影响范围时，才去用$apply，很暴力地遍历整个作用域树，调用其中所有的监控。
从另外一个角度，我们也可以看到，为什么调用外部框架的时候，是推荐放在$apply中，因为只有这个地方才是对所有数据变更都应用的地方，如果用$digest，有可能临时丢失数据变更。
脏检测的利弊
很多人对Angular的脏检测机制感到不屑，推崇基于setter，getter的观测机制，在我看来，这只是同一个事情的不同实现方式，并没有谁完全胜过谁，两者是各有优劣的。
大家都知道，在循环中批量添加DOM元素的时候，会推荐使用DocumentFragment，为什么呢，因为如果每次都对DOM产生变更，它都要修改DOM树的结构，性能影响大，如果我们能先在文档碎片中把DOM结构创建好，然后整体添加到主文档中，这个DOM树的变更就会一次完成，性能会提高很多。
同理，在Angular框架里，考虑到这样的场景：
function TestCtrl($scope) {
$scope.numOfCheckedItems = 0;
var list = [];
for (var i=0; i<10000; i++) {
list.push({
index: i,
checked: false
});
}
$scope.list = list;
$scope.toggleChecked = function(flag) {
for (var i=0; i<list.length; i++) {
list[i].checked = flag;
$scope.numOfCheckedItems++;
}
};
}
如果界面上某个文本绑定这个numOfCheckedItems，会怎样？在脏检测的机制下，这个过程毫无压力，一次做完所有数据变更，然后整体应用到界面上。这时候，基于setter的机制就惨了，除非它也是像Angular这样把批量操作延时到一次更新，否则性能会更低。
所以说，两种不同的监控方式，各有其优缺点，最好的办法是了解各自使用方式的差异，考虑出它们性能的差异所在，在不同的业务场景中，避开最容易造成性能瓶颈的用法。
相关推荐
-
AngularJS单选框及多选框实现双向动态绑定
在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te
-
AngularJS入门教程之双向绑定详解
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g
-
AngularJS学习笔记（三）数据双向绑定的简单实例
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb
-
AngularJS双向绑定和依赖反转实例详解
AngularJS双向绑定和依赖反转 一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新UI数据. UI改变->数据改变原理: <html> <body> <input type="text" name="name" value="" id="text1&
-
AngularJS 单选框及多选框的双向动态绑定
AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu
-
深入理解Angularjs向指令传递数据双向绑定机制
下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </
-
实例剖析AngularJS框架中数据的双向绑定运用
数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立起了文本输入框跟页面的双向绑定. 在这个语境里"双向"意味着如果view改变了属性值,model就会"看到"这个改变,而如果model改变了属性值,view也同样会"看到"这个改变.Angular.js 为你自动搭建好了这个机制.如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作. 要建立
-
使用AngularJS处理单选框和复选框的简单方法
AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.
-
深入学习AngularJS中数据的双向绑定机制
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模
-
Vue.js第一天学习笔记（数据的双向绑定、常用指令）
数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给 input 框输入 豆豆 后页面中 span 里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div
-
利用js实现Vue2.0中数据的双向绑定功能
Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对象. prop 要定义或修改的属性的名称 descriptor 要定义或修改的属性描述符 obj和prop很好理解 比如我们定义一个变量为 const o = { name:'xbhog' } 其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor descriptor 目标对象属性的一些特征
-
Angular JS数据的双向绑定详解及实例
Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count
-
Vue2.0实现组件数据的双向绑定问题
通过上一节的学习,我们了解到了在Vue的组件中数据传递: prop 向下传递,事件向上传递 .意思是父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.但Vue中, props 是单向数据绑定,虽然在Vue 1.0版本中,通过 .sync 能实现双向数据绑定.但 .sync 在几个版本中被移除,尽管在2.3版本重新引入 .sync 修饰符,可这次引入只是作为一个编译时的语法糖存在.如果直接使用 .sync 修饰符来做双向数据绑定,会报警告信息.那么我们如何在组件中实现双向数据
-
vue.js利用defineProperty实现数据的双向绑定
vue.js如何实现数据的双向绑定呢? 与angular不同. vue利用的是es5的defineproperty特性. 1.一个小例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="tex
-
详解Vue.js之视图和数据的双向绑定(v-model)
1.使用v-model指令,使得视图和数据实现双向绑定.v-model主要用在表单的input输入框,完成视图和数据的双向绑定. 2.JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() {
-
iview-table组件嵌套input select数据无法双向绑定解决
目录 一.前言 二.问题描述 三.解决办法 1.基础数据表格 2.树形数据表格 四.后记 一.前言 本篇主要介绍关于iview-ui组件库中的table表格组件嵌套input组件,数据无法及时更新问题的解决办法. 二.问题描述 在我们开发的过程中,经常会遇到需要在表格内操作数据的情况,但是在vue2中,双向绑定的值必须是在data中声明的变量,然而我们在table中展示的每一行数据,通常都是使用的scope中的row去获取的当前行数据,但是row却并没有在data中声明,这样就出现了,无法实现数
-
使用Vue.js实现数据的双向绑定
目录 如何用Vue.js实现数据的双向绑定? 1. 理解双向绑定 2. 使用v-model指令 3. 使用自定义组件实现双向绑定 4. 数据劫持 5. 模板引擎 6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据.在本文中,我们将介绍如何用Vue.js实现数据的双向绑定. 1. 理解双向绑定 首先,我们需要了解双向绑定的原理.在Vue.js中