课堂课题：
angularjs双向绑定后，发生了什么事情？是什么可以让view层和controller层进行绑定的？
关联任务：
任务二
直播时间：
2019-12-08 15:00:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
背景介绍
AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。
2.知识剖析
WATCH作用
这有点类似于我们的观察者模式，在当前作用域$scope下， 我们创建一个监控器$watchers和一个监听器$watch，$watchers 负责管理所有的 $watch， 当我们每次绑定到UI上的时候就自动创建一个$watch，并把它放到 $watchers。
$DIGEST作用
当浏览器接收到可以被angular context处理的事件时， $digest循环就会触发。 $digest将会遍历我们的$watch， 如果$watch没有变化，这个循环检测就将停止，如果有至少一个更新过，这个循环就会再次触发， 直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制.
脏检查机制
对脏数据的检查就是脏检查，比较UI和后台数据是否一致。只有当UI事件、ajax请求或者timeout延迟事件，才会触发脏检查
$APPLY
$apply 我们可以直接理解为刷新UI。如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入，之后的$digest检测机制就不会触发, 并不直接使用$digest，而是调用$scope.$apply()，$apply内部会触发$digest递归遍历。 同时，你可以给$apply传一个参数，是个函数，这个函数会在$digest开始之前执行。
3.常见问题
angular内部怎么触发$digest？
解决方案
实际上，angular里面要求你通过ng-click, ng-modal, ng-keyup等来进行数据的双向绑定，为什么，因为这些angular的内部指令封装了$apply，比如ng-click，它其实包含了document.addEventListener('click')和$scope.$apply()。
6.编码实战
<nz-form-item>
<nz-form-label [nzSpan]="5" nzRequired>标题</nz-form-label>
<nz-form-control nzHasFeedback [nzSpan]="12" nzErrorTip="请填写标题">
<input nz-input [(ngModel)]="data.title" name="title" required maxlength="25" placeholder="标题名称"
[disabled]='yes' #spy />
</nz-form-control>
</nz-form-item>
要用双向绑定一定要在angular引入双向绑定模块否则你的模块是用不了的。
参考文献：
六小登登的技术博客
https://www.cnblogs.com/beevesnoodles/p/9844854.html
鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
