ANGULARJS双向绑定后,发生了什么事情?是什么可以让VIEW层和CONTROLLER层进行绑定的?

本文深入探讨了AngularJS中的双向绑定机制,解释了其与单向数据绑定的区别,以及它是如何通过watch、digest和apply机制实现实时更新数据模型和视图的。文章还讨论了MVVM模式下Controller、View和Scope的角色,以及digest和apply的区别。
摘要由CSDN通过智能技术生成

1、Angularjs双向绑定后,发生了什么事情?是什么可以让view层和Controller层进行绑定的?

单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面,但是单向绑定有个缺点,就是如果有新的数据来了,那就必须把之前的HTML代码去掉,再重新把新的数据和模板一起整合后插入到文档流中。

双向绑定:数据模型和视图之间的双向绑定。意思就是当用户在视图上的修改会自动同步到数据中去,同样的,如果数据中的值发生了变化,也会立刻同步到视图中去。

AngularJS模板的工作原理不同。不同之处在于:第一,模板(附加了自定义属性等标记的未经编译的HTML)是由浏览器编译的;
第二,编译最后产生的是一个动态的视图。这里动态指的是视图的任何变化都会直接反应到模型,反之亦然。这使得模型总是应用状态的唯一标识,这大大简化了开发人员的编程工作。你可以简单地认为视图只是模型的投影
2.如何绑定

如果让我们自己实现双向绑定该怎么写:

3.如何实现

众所周知,angular是一个MVVM(Model-View,View-Model)模式的框架,可以实现数据和视图数据绑定。MVVM把数据加工的任务从Controller中解放了出来。使得Controller只需专注于数据调配的工作。

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相应地变化。

这个就是所谓的dirty-check,angular实际会引入了一个初始值为false的dirty变量作为循环条件,如果有改变过(也就是新旧值不相等),dirty变为true,循环继续。这里很重要的(也是许多人的很蛋疼的地方)是每一个进入angular context的事件都会执行一个digest循环,也就是说每次我们输入一个字母循环都会检查整个页面的所有watch。

那是什么决定一个事件是否进入angular context呢?

答案是apply

我之前碰到过在angular中使用普通的事件,无法双向绑定的事情:

这里值虽然改变了,但是没有强制执行$degest,监视foo的watch根本没有执行,执行一次apply之后,watch就会知道这些变化,更新dom了。

这里只需要加上scope.$apply()就行了。

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

4.常见问题

1、digest和apply有何区别?
2、干嘛不直接使用digest?
3、apply()和 apply()和digest() 有两个区别?

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

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

3、 最直接的差异是, $apply 可以带参数,( //无参 s c o p e . scope. scope.apply() //有参 s c o p e . scope. scope.apply(function(){ … }))它可以接受一个函数,然后在应用数据之后,调用这个函数。所以,一般在集成非当调用 digest的时候,只触发当前作用域和它的子作用域上的监控,但是当调用 digest的时候,只触发当前作用域和它的子作用域上的监控,但是当调用apply 的时候,会触发作用域树上的所有监控。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值