AngularJS中的digest循环$apply

欢迎大家指导与讨论 : )

  前言

  Angular会拓展这个标准的浏览器流程,创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码,该Angular事件循环被称作为$digest循环。$digest循环有两个组成部分,分别是$watch列表和$evalAsync列表。

  例如,当 <input> 标签绑定了$scope.name属性,为了更新这个视图,Angular需要追踪变化。它是通过给$watch列表添加一个监控函数做到这一点。而$watch列表会在$digest循环中通过一个叫做"脏值检查"的程序解析。

  脏值检查

   Angular会持续追踪当前监控的值。Angular会遍历$watch列表,如果从旧值更新后的值没有发生变化,它会继续遍历监控列表。如果值发生了变化,则Angular会启用新值并继续遍历$watch列表。Angular会遍历完整个列表,只要有任何值发生变化,它就会退回到$watch循环中,直到检测到不再发生变化。如果这个循环运行了10次或者更多,则Angular会抛出一个异常,并停止运行。

  例子

  某间学校里,同学们都要在这儿住宿,但是呢有好几个学生很不乖,整天不好好睡觉,就知道玩游戏。学校领导知道后就要求老师说:"hey! 哥们, 这几间宿舍的学生特别不乖,你帮我多多看着他们!",同时把一份宿舍名单列表给了老师($watch列表里添加了监控函数)。每天晚上,老师都会不断巡查宿舍名单列表上的那几间宿舍(Angular遍历监控列表)。突然有一天,老师在巡查432宿舍的时候发现小明居然不好好睡觉而是在玩游戏!(Angular发现了变化),老师把小明教育了一顿,然后让它继续睡觉(启用变化后的新值)。但是老师就想,刚才小明是不是在和别的宿舍的同学一起联机玩游戏呢?我得继续巡查巡查(受变化值的影响,$watch列表中的其他值,可能跟随着一起发生了变化,也可能没有。例如$scope.num1=1,现在发生了变化,$scope.num1=10了。然后呢$scope.num2=2,不会受到$scope.num1影响,但是呢$scope.num3=num1+10的,它的值由原来的11变成了20, 因此Angular会进行二次巡查,直到监听的值没有再发生变化)。

  $watch

  $watch函数会给监听函数返回一个注销函数,我们可以通过调用注销函数来取消Angular对当前值的监听

var unregisterWatch = $scope.watch(‘model.email‘,
   function(newVal, oldVal){
       if(newVal === oldVal) return; //初始化
       if(newVal != oldVal){
             //...
       }
   }
)

  假如对完成了该值的监听,可以通过调用 unregisterWatch() 来取消监控。其中,监听函数会在初始化时被调用一次,此时newVal === oldVal均为undefined

  $watchCollection

  可以通过此函数为对象的属性或者数组元素设置浅监控

$scope.watchCollection(‘names‘,
    function(newNames, oldNames){
     //
    }
)

  $apply()与$digest()

  $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行,并让结果受控(进行digest循环)。例如实现了一个setTimeout()并想让事件运行在Angular上下文内部时,就必须使用$apply()

$scope.apply(function(){
     setTimeout(function(){
         //...
     }, 1000)
})

  或者直接通过调用$digest()函数进行digest循环,以进行脏值检查

//..some action
$scope.$digest();

  

  参考资料

  《AngularJS权威指南》P326

时间: 2024-08-25 17:34:12

AngularJS中的digest循环$apply的相关文章

angularJS中的$apply(),$digest(),$watch()

$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的. $apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式.数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模

AngularJS中的$watch(),$digest()和$apply()

AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数. 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"."Watch"用于监听AngularJS scope中变量的改变.可以通过调用$scope.$watch()这个方法来创建"Watch". $scope.$digest()函数会循环访问

angularJS中$apply()方法详解

这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 代码如下: "scope is an object that refers to the a

关于AngularJs中监听事件及脏循环的理解

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

AngularJS中实现Model缓存

在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope的某个变量. 有的直接把对象赋值给Scope变量:有的在Provider中返回一个对象再赋值给Scope变量:有的在Provider中返回一个构造函数再赋值给Scope变量.本篇来一一体验. 首先自定义一个directive,用来点击按钮改变一个scope变量值. angular .module('

浅谈AngularJS中的$parse和$eval

AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于AngularJS的表达式. 什么是表达式?AngularJS中的表达式就是一些类似于JavaScript代码的代码片段(但是它们和JavaScript代码有不尽相同).表达式通常被用来防止在绑定中,例如{{expression}}.下面是一个例子: 1 + 2 = {{ 1 + 2 }}或者: My n

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi