AngularJS应用的启动和执行过程

启动（startup）：

在编译阶段：　　input元素上的ng-model指令会给输入框绑定keydown事件；　　{{name}}这个变量替换表达式建立了一个 $watch ，来接受 name 变量改变的通知。在执行期阶段：　　按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；　　input 上的指令捕捉到 input 内容的改变，然后调用 $apply("name = 'X';")来更新处于AngularJS执行上下文中的模型；　　AngularJS将 name='X'应用到模型上；　　$digest 循环开始；这个循环是由两个小循环组成的，这两个小循环用来处理$evalAsync队列和$watch列表。这个$digest循环直到模型“稳定”前会一直迭代。这个稳定具体指的是$evalAsync列表为空，并且$watch列表中检测不到任何改变了。这个$evalAsync队列是用来管理那些“视图渲染前需要在当前栈外执行的操作”。这通常使用 setTimeout(0)来完成的。并且，因为浏览器会根据事件队列按顺序渲染视图，这时还会造成视图的抖动。$watch列表是一个表达式的集合，这些表达式可能是自上次迭代后发生了改变的。如果检测到了有改变，那么$watch函数就会被调用，它通常会把新的值更新到DOM中。

　　$watch 列表检测到了name值的变化，然后通知 {{name}}变量替换的表达式，这个表达式负责将DOM进行更新；　　AngularJS退出执行上下文，然后退出Javascript上下文中的keydown事件；　　浏览器以更新的文本重新渲染视图。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!