angular

361 阅读1分钟

angularjs 的双向绑定

 angularjs的双向数据绑定采用脏检查(dirty-checking)机制。ng只有在指定事件触发后,才进入 $digest cycle : (不是轮询)

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR响应事件 ( $http )

  • 浏览器Location变更事件 ( $location )

  • Timer事件( timeout,timeout , interval )

  • 执行 digest()digest() 或 apply()

  1. 每个双向绑定的元素都有一个watcher
  2. 在某些事件发生的时候,调用digest脏数据检测。这些事件有:表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。
  3. 脏数据检测会检测rootscope下所有被watcher的元素。

表达式 {{yourModel}}是如何工作的?

  它依赖于 interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个,则会设置一个interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个{{}},则会设置一个watch。而interpolation会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式interpolation会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式parse到那个作用域上。

angular 的数据绑定采用什么机制?详述原理。

  Angular 在 scope 模型上设置了一个监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 watch队列里插入一条watch 队列里插入一条 watch ,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时, digest循环就会触发,遍历所有的digest 循环就会触发,遍历所有的 watch ,最后更新 dom