深入学习AngularJS中数据的双向绑定机制
AngularJS(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中:
<bodyng-app="ngApp"> <divng-controller="ngCtl"> <labelng-model="myLabel"></label> <inputtype="text"ng-model="myInput"/> <buttonng-model="myButton"ng-click="btnClicked"></button> </div> </body>
在js中:
//angularapp
varapp=angular.module("ngApp",[],function(){
console.log("ng-app:ngApp");
});
//angularcontroller
app.controller("ngCtl",['$scope',function($scope){
console.log("ng-controller:ngCtl");
$scope.myLabel="textforlabel";
$scope.myInput="textforinput";
$scope.btnClicked=function(){
console.log("Labelis"+$scope.myLabel);
}
}]);
如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等).则在该ngCtl的作用域内的HTML标签,其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.
这样,就实现了NG的双向数据绑定:即HTML中呈现的view与AngularJS中的数据是一致的.修改其一,则对应的另一端也会相应地发生变化.
这样的方式,使用起来真的非常方便.我们仅关心HTML标签的样式,及其对应在js中angularcontroller作用域下绑定的属性和方法.仅此而已,将众多复杂的DOM操作全都省略掉了.
这样的思想,其实跟jQuery的DOM查询和操作是完全不一样的,因此也有很多人建议用AngularJS的时候,不要混合使用jQuery.当然,二者各有优劣,使用哪个就要看自己的选择了.
NG中的app相当于一个模块module,在每个app中可以定义多个controller,每个controller都会有各自的作用域空间,不会相互干扰.
绑定数据是怎样生效的
初学AngularJS的人可能会踩到这样的坑，假设有一个指令：
varapp=angular.module("test",[]);
app.directive("myclick",function(){
returnfunction(scope,element,attr){
element.on("click",function(){
scope.counter++;
});
};
});
app.controller("CounterCtrl",function($scope){
$scope.counter=0;
});
<bodyng-app="test">
<divng-controller="CounterCtrl">
<buttonmyclick>increase</button>
<spanng-bind="counter"></span>
</div>
</body>
这个时候，点击按钮，界面上的数字并不会增加。很多人会感到迷惑，因为他查看调试器，发现数据确实已经增加了，Angular不是双向绑定吗，为什么数据变化了，界面没有跟着刷新？
试试在scope.counter++;这句之后加一句scope.digest();再看看是不是好了？
为什么要这么做呢，什么情况下要这么做呢？我们发现第一个例子中并没有digest，而且，如果你写了digest，它还会抛出异常，说正在做其他的digest，这是怎么回事？
我们先想想，假如没有AngularJS，我们想要自己实现这么个功能，应该怎样？
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>two-waybinding</title>
</head>
<bodyonload="init()">
<buttonng-click="inc">
increase1
</button>
<buttonng-click="inc2">
increase2
</button>
<spanstyle="color:red"ng-bind="counter"></span>
<spanstyle="color:blue"ng-bind="counter"></span>
<spanstyle="color:green"ng-bind="counter"></span>
<scripttype="text/javascript">
/*数据模型区开始*/
varcounter=0;
functioninc(){
counter++;
}
functioninc2(){
counter+=2;
}
/*数据模型区结束*/
/*绑定关系区开始*/
functioninit(){
bind();
}
functionbind(){
varlist=document.querySelectorAll("[ng-click]");
for(vari=0;i<list.length;i++){
list[i].onclick=(function(index){
returnfunction(){
window[list[index].getAttribute("ng-click")]();
apply();
};
})(i);
}
}
functionapply(){
varlist=document.querySelectorAll("[ng-bind='counter']");
for(vari=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框架的代码时，可以把代码写在这个里面调用。
varapp=angular.module("test",[]);
app.directive("myclick",function(){
returnfunction(scope,element,attr){
element.on("click",function(){
scope.counter++;
scope.$apply(function(){
scope.counter++;
});
});
};
});
app.controller("CounterCtrl",function($scope){
$scope.counter=0;
});
除此之外，还有别的区别吗？
在简单的数据模型中，这两者没有本质差别，但是当有层次结构的时候，就不一样了。考虑到有两层作用域，我们可以在父作用域上调用这两个函数，也可以在子作用域上调用，这个时候就能看到差别了。
对于$digest来说，在父作用域和子作用域上调用是有差别的，但是，对于$apply来说，这两者一样。我们来构造一个特殊的示例：
varapp=angular.module("test",[]);
app.directive("increasea",function(){
returnfunction(scope,element,attr){
element.on("click",function(){
scope.a++;
scope.$digest();
});
};
});
app.directive("increaseb",function(){
returnfunction(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);
});
}]);
<divng-app="test">
<divng-controller="OuterCtrl">
<divng-controller="InnerCtrl">
<buttonincreaseb>increaseb</button>
<spanng-bind="b"></span>
</div>
<buttonincreasea>increasea</button>
<spanng-bind="a"></span>
</div>
</div>
这时候，我们就能看出差别了，在increaseb按钮上点击，这时候，a跟b的值其实都已经变化了，但是界面上的a没有更新，直到点击一次increasea，这时候刚才对a的累加才会一次更新上来。怎么解决这个问题呢？只需在increaseb这个指令的实现中，把$digest换成$apply即可。
当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。
因此，从性能上讲，如果能确定自己作的这个数据变更所造成的影响范围，应当尽量调用$digest，只有当无法精确知道数据变更造成的影响范围时，才去用$apply，很暴力地遍历整个作用域树，调用其中所有的监控。
从另外一个角度，我们也可以看到，为什么调用外部框架的时候，是推荐放在$apply中，因为只有这个地方才是对所有数据变更都应用的地方，如果用$digest，有可能临时丢失数据变更。
脏检测的利弊
很多人对Angular的脏检测机制感到不屑，推崇基于setter，getter的观测机制，在我看来，这只是同一个事情的不同实现方式，并没有谁完全胜过谁，两者是各有优劣的。
大家都知道，在循环中批量添加DOM元素的时候，会推荐使用DocumentFragment，为什么呢，因为如果每次都对DOM产生变更，它都要修改DOM树的结构，性能影响大，如果我们能先在文档碎片中把DOM结构创建好，然后整体添加到主文档中，这个DOM树的变更就会一次完成，性能会提高很多。
同理，在Angular框架里，考虑到这样的场景：
functionTestCtrl($scope){
$scope.numOfCheckedItems=0;
varlist=[];
for(vari=0;i<10000;i++){
list.push({
index:i,
checked:false
});
}
$scope.list=list;
$scope.toggleChecked=function(flag){
for(vari=0;i<list.length;i++){
list[i].checked=flag;
$scope.numOfCheckedItems++;
}
};
}
如果界面上某个文本绑定这个numOfCheckedItems，会怎样？在脏检测的机制下，这个过程毫无压力，一次做完所有数据变更，然后整体应用到界面上。这时候，基于setter的机制就惨了，除非它也是像Angular这样把批量操作延时到一次更新，否则性能会更低。
所以说，两种不同的监控方式，各有其优缺点，最好的办法是了解各自使用方式的差异，考虑出它们性能的差异所在，在不同的业务场景中，避开最容易造成性能瓶颈的用法。