AngularJs学习笔记(3)--$scope中的$apply和$digest方法

最新推荐文章于 2022-09-13 16:13:27 发布
最新推荐文章于 2022-09-13 16:13:27 发布
阅读量398 收藏
点赞数
分类专栏： AngularJS JS
JS 同时被 2 个专栏收录
122 篇文章 0 订阅
订阅专栏
AngularJS
10 篇文章 0 订阅
订阅专栏


http://xlows.blog.51cto.com/5380484/1425325


首先，我们利用angular在页面上输出当前的时间，这个并不难，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
</ head >
< body >
     < div  ng-app = "" >
 
         < div  ng-controller = "firstController" >
             {{date}}
         </ div >
     </ div >
 
 
     < script  type = "text/javascript"  src = "app/index.js" ></ script >
< script  type = "text/javascript"  src = "../../vendor/angular/angularjs.js" ></ script >
</ body >
</ html >
1
2
3
4
5
var  firstController =  function ($scope){
 
     $scope.date =  new  Date();
 
}

此时页面会输出当前时间。

wKioL1OZHWrDFugiAAAXdOUq9RA634.jpg

那么，现在有一个需求，要求时间每秒中更新一次。

我们把js代码改成如下：

1
2
3
4
5
6
7
8
9
10
var  firstController =  function ($scope){
 
     $scope.date =  new  Date();
 
     setInterval( function (){
 
         $scope.date =  new  Date();
 
     },1000)
}

在运行，发现页面并没有每秒刷新一次。那么在Model中变的时候，如何通知页面变化呢？


(1)什么是scope

scope是一个指向应用model的object，也是表达式的执行上下文，它被放置于一个类似应用的DOM结构的层次结构中。

(2)angular是怎么知道变量发生了改变

①要知道一个变量变了，方法不外乎两种

  1. 能通过固定的接口才能改变变量的值，比如说只能通过set()设置变量的值，set被调用时比较一下就知道了。这种方法的缺点是写法繁琐。

  2. 脏检查，将原对象复制一份快照，在某个时间，比较现在对象与快照的值，如果不一样就表明发生变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这样会有一定性能问题。

②angular的策略

angular的实现是使用脏检查

  1. 不会脏检查所有的对象，当对象被绑定到html中，这个对象添加为检查对象(watcher)。

  2. 不会脏检查所有的属性，同样当属性被绑定后，这个属性会被列为检查的属性。

  3. 在angular程序初始化时，会将绑定的对象的属性添加为监听对象(watcher)，也就是说一个对象绑定了N个属性，就会添加N个watcher。

③什么时候去脏检查

angular所有系统的方法中都会触发比较事件，比如：

controller初始化的时候，所有以ng-开头的时间执行后，都会触发脏检查。

因此，可以想到，在第一次加载页面时候，controller初始化的时候，会检查其中的date，进行第一次赋值。

而后setInterval每秒触发一次，此时date虽然变了，但是并没有触发脏检查，因此不会触发页面上的改变。

(3)手动触发脏检查

$apply仅仅只是进入angular context，然后通过$digest方法去触发脏检查

$apply如果不给参数的话，会检查该$scope里的所有监听的属性，推荐给上参数。


通过上面的说明，我们可以js代码改成如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var  firstController =  function ($scope){
 
     $scope.date =  new  Date();
 
     setInterval( function (){
         $scope.$apply( function (){
             $scope.date =  new  Date();
             //....会去触发脏检查
         })
     },1000)
 
 
     // 触发一次脏检查
}

此时，页面每个1秒会更新一次时间。


看一下$apply的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   $apply:  function (expr) {
               try  {
                  beginPhase( '$apply' );
                  return  this .$eval(expr);
               }  catch  (e) {
                  $exceptionHandler(e);
               } finally {
                  clearPhase();
                  try  {
                    $rootScope.$digest();
                  }  catch  (e) {
                    $exceptionHandler(e);
                    throw  e;
                  }
               }
    }

可以看到，$apply方法首先会通过$eval来解析里面的表达式，如果表达式有错会抛出错误，如果没有错误才会触发$digest方法。


(4)关于$digest()

其控制器所属的scope和其所有子scope的脏检查，脏检查又会触发$watch(),整个angular双向绑定机制就活了过来

这里不建议直接调用$digest(),而应该使用$apply,$apply其实不能把信直接送给$digest，之间还有$eval门卫把关，如果$apply带的表达式不合法，$eval会把错误交给$exceptionHandler，合法才会触发$digest，所有更安全。


简单的绿竹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular项目中$scope.$apply()方法的使用详解
weixin_53777231的博客
02-07 3082
前言 相信大家在一开始用angular做项目的时候，一定碰到过$scope.$apply()方法，表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢? JavaScript执行顺序 JavaScript单线程操作，代码按照代码片段的顺序来之行，每个代码块从运行到结束都不会被打断，这也是为什么会发生浏览器阻塞的情况，往往是有一部分在运行，而导致其他所有的代码段冻结。 每当有耗费时间较多的任务出现，例如等待一个click事件，等待Ajax请求的回应，我们都会设定一个回调
angular1.0 $scope.$apply() $scope.$digest();用法
meng1128的博客
05-04 760
$scope.$apply(); $scope.$digest();  让 从服务器  数据库 获取的数据 重新绑定前台 的scope内的数据刷新  重新渲染到前台页面
理解Angular中的$apply()和$digest()
man_tutu的博客
06-20 2783
$apply() 和 $digest() 是 AngularJS 中的两个核心概念，有时它们令人困惑。要理解 AngularJS 是如何工作的，需要完全理解 $apply() 和 $digest() 是如何工作的。本文的目的是解释 $apply() 和 $digest() 实际上是什么，以及如何在你的日常的 AngularJS 编程中应用它们。
JS - Angular项目中$scope.$apply()方法的使用详解
qq_37131747的博客
09-13 584
相信大家在一开始用angular做项目的时候，一定碰到过$scope.$apply()方法，表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢?
angularjs 中$apply，$digest，$watch详解
10-21
在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
10-18
主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS中的$watch()，$digest()和$apply()区分
10-22
主要介绍了AngularJS中的$watch()，$digest()和$apply()区分，感兴趣的朋友可以参考一下
AngularJS报错$apply already in progress的解决方法分析
01-19
如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这个错误没有太大影响，但是在日志中看起来还是很不爽的，日志中记录的异常或者错误，就应该是需要关注和...
$scope里的$apply,$digest的方法使用
weixin_45932157的博客
09-28 131
页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
angularjs基础—$scope.$apply的应用
skyxuyan的专栏
10-09 764
$apply() 和 $digest() 在 AngularJS 中是两个核心概念。 AngularJS 提供了一个非常酷的特性叫做双向数据绑定 (Two-way Data Binding) ，这个特性大大简化了我们的代码编写方式。 数据绑定意味着当 View 中有任何数据发生了变化，那么这个变化也会自动地反馈到 scope 的数据上，也即意味着 scope 模型会自动地更新
Angular($digest和$apply)
学如逆水行舟，不进则退
05-07 859
$digest和$apply 在Angular中，有$apply和$digest两个函数，我们刚才是通过$digest来让这个数据应用到界面上。但这个时候，也可以不用$digest，而是使用$apply，效果是一样的，那么，它们的差异是什么呢？ 最直接的差异是，$apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。所以，一般在集成非Angular框架的代码时，可
angularJS中的$apply(),$digest(),$watch()
weixin_30606461的博客
08-09 268
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。 $apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据...
$rootScope.$apply()
red_heel的博客
08-23 1326
$rootScope.$apply()
Angularjs $scope 里面的$apply方法 和 $watch方法
Christine95的博客
10-17 5488
1. Angularjs $scope 里面的$apply 方法 $apply 方法作用： Scope 提供$apply 方法传播 Model 的变化 $apply 方法使用情景： AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（
解决$scope.$apply()报错问题
Alfred的博客
12-11 3533
($scope.$$phase||$scope.$root.$$phase)?"":$scope.$apply();
$scope.$$phase
最新发布
07-27
$scope.$$phase是AngularJS中的一个属性，用于检测当前是否处于脏值检测的过程中。\[1\]在AngularJS中，脏值检测是用来检测数据模型的变化并更新视图的过程。当数据模型发生变化时，AngularJS会自动触发脏值检测，然后更新相应的视图。 在引用\[1\]和引用\[2\]中，$scope.$$phase被用来判断当前是否处于脏值检测的过程中。如果不处于脏值检测的过程中，就可以调用$scope.$apply()方法来手动触发脏值检测，从而更新视图。而如果已经处于脏值检测的过程中，就不需要再调用$scope.$apply()方法了，以避免出现错误。 引用\[3\]中提到了可能会遇到的错误：Error: \[$rootScope:inprog\] $digest already in progress。这个错误表示在脏值检测的过程中又尝试触发了脏值检测，导致了循环调用的错误。为了避免这个错误，可以使用条件判断来判断是否需要调用$scope.$apply()方法，就像引用\[2\]中的代码所示。 综上所述，$scope.$$phase是用来判断当前是否处于脏值检测的过程中的属性。根据不同的情况，可以使用$scope.$apply()方法来手动触发脏值检测，以更新视图。但是需要注意避免在脏值检测的过程中再次触发脏值检测，以避免出现循环调用的错误。 #### 引用[.reference_title] - *1* [angular 手动刷新值 $scope.$apply()](https://blog.csdn.net/lybwwp/article/details/108348059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [angulr 报错：$digest already in progress](https://blog.csdn.net/Nonsense_man/article/details/91422403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值