angularjs双向绑定后，发生了什么事情？view层和controller层是如何进行绑定的？

9953WEBangular2017-12-192024-12-07

背景介绍

双向绑定，是从界面的操作能实时反映到数据，数据的变更也能

实时展现到界面

如果我们自己实现双向数据绑定该怎么写？

angular是一个MVVM（Model-View，View-Model）模式的框架。

MVC:View传送指令到Controller；Controller完成业务逻辑后，要求Model改变状态；

Model将新的数据发送到View；所有通信都是单向的

MVVM它采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。

View是angularjs编译html后呈现出来的，需要编译的是controller中的定义的属性和方法以及directive中定义的指令。

View和controller是独立开来的，他们之间的纽带就是scope。Controller负责向scope中提供属性和方法，

便于和view层面的html进行交互。

Angular双向绑定通过$watch,$digest，$apply实现的。

watch序列

watch监控model中是否有变化，会记录last值，也就是改变后的值，每一个model都会增加一个watch到watch队列中。

digest循环

当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发，这个循环有两个子循环，

一个处理evalAsync队列，另一个处理watch队列，$digest会遍历$watch

既然所有的$watch都检查完了，那就要问了：有没有$watch更新过？如果有至少一个更新过，这个循环就会再次触发，

直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，

它将会抛出一个异常，防止无限循环。当$digest循环结束时，DOM相应地变化。

每一个进入angular context的事件都会执行一个$digest循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch。

$digest和$apply有何区别？干嘛不直接使用$digest?

这里值虽然改变了，但是没有强制执行$degest,watch根本没有执行

一般带ng的事件angular都会给你自动添加好了apply，但是你要操纵事件的时候加上apply才能实现数据输出到view层中。

为什么在ng-click里面调用$digest的话，会报错呢？因为Angular的设计，同一时间只允许一个$digest运行，

而ng-click这种内置指令已经触发了$digest，当前的还没有走完，所以就出错了

当你传入一个function到$apply()中的时候，这个function会被包装到一个try…catch块中，所以一旦有异常发生，

该异常会被$exceptionHandler service处理。

1.$apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。

2.当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。