博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
$digest already in progress 解决办法——续
阅读量:5890 次
发布时间:2019-06-19

本文共 2306 字,大约阅读时间需要 7 分钟。

什么时候手动调用$apply()方法?

如果AngularJS总是将我们的代码wrap到一个function中并传入$apply(),以此来开始一轮$digest循环,那么什么时候才需要我们手动地调用$apply()方法呢?实际上,AngularJS对此有着非常明确的要求,就是它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即,在$apply()方法中发生的对于models的更改)AngularJSbuilt-in指令就是这样做的,所以任何的model变更都会被反映到view中。但是,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。这就像告诉AngularJS,你修改了一些models,希望AngularJS帮你触发watchers来做出正确的响应。

 

比如,如果你使用了JavaScript中的setTimeout()来更新一个scope model,那么AngularJS就没有办法知道你更改了什么。这种情况下,调用$apply()就是你的责任了,通过调用它来触发一轮$digest循环。类似地,如果你有一个指令用来设置一个DOM事件listener并且在该listener中修改了一些models,那么你也需要通过手动调用$apply()来确保变更会被正确的反映到view中。

 

让我们来看一个例子。加入你有一个页面,一旦该页面加载完毕了,你希望在两秒钟之后显示一条信息。你的实现可能是下面这个样子的:

HTML:

  
Delayed Message: {
{message}}

JavaScript:

/* What happens without an $apply() */        angular.module(‘myApp‘,[]).controller(‘MessageController‘, function($scope) {          $scope.getMessage = function() {        setTimeout(function() {          $scope.message = ‘Fetched after 3 seconds‘;          console.log(‘message:‘+$scope.message);        }, 2000);      }            $scope.getMessage();        });

通过运行这个例子,你会看到过了两秒钟之后,控制台确实会显示出已经更新的model,然而,view并没有更新。原因也许你已经知道了,就是我们忘了调用$apply()方法。因此,我们需要修改getMessage(),如下所示:

/* What happens with $apply */ angular.module(‘myApp‘,[]).controller(‘MessageController‘, function($scope) {          $scope.getMessage = function() {        setTimeout(function() {          $scope.$apply(function() {            //wrapped this within $apply            $scope.message = ‘Fetched after 3 seconds‘;             console.log(‘message:‘ + $scope.message);          });        }, 2000);      }            $scope.getMessage();        });

如果你运行了上面的例子,你会看到view在两秒钟之后也会更新。唯一的变化是我们的代码现在被wrapped到了$scope.$apply()中,它会自动触发$rootScope.$digest(),从而让watchers被触发用以更新view

 

Note:顺便提一下,你应该使用$timeout service来代替setTimeout(),因为前者会帮你调用$apply(),让你不需要手动地调用它。

 

而且,注意在以上的代码中你也可以在修改了model之后手动调用没有参数的$apply(),就像下面这样:

$scope.getMessage = function() {  setTimeout(function() {    $scope.message = ‘Fetched after two seconds‘;    console.log(‘message:‘ + $scope.message);    $scope.$apply(); //this triggers a $digest  }, 2000);};

以上的代码使用了$apply()的第二种形式,也就是没有参数的形式。需要记住的是你总是应该使用接受一个function作为参数的$apply()方法。这是因为当你传入一个function$apply()中的时候,这个function会被包装到一个trycatch块中,所以一旦有异常发生,该异常会被$exceptionHandler service处理。

转载地址:http://xhysx.baihongyu.com/

你可能感兴趣的文章
myeclilpse打开文件所在位置的图标消失后的找回方法
查看>>
Android利用文本分割拼接开发一个花藤文字生成
查看>>
哈夫曼树的实现
查看>>
12-18Windows窗体应用小程序之记事本(1)
查看>>
毕业论文一次性修改所有字母和数字的字体
查看>>
结构体:HASH表模板
查看>>
[转]理解Linux文件系统之inode
查看>>
在i3 Cpu上允许64位系统
查看>>
视频编解码学习之五:差错控制及传输
查看>>
Postman教程
查看>>
python模块--os模块
查看>>
HSSFRow获取单元格方法与区别
查看>>
洛谷 1365 WJMZBMR打osu! / Easy
查看>>
删除UINavigationItem上的BarButtonItem
查看>>
数据分析相关模块
查看>>
Python数据结构1-----基本数据结构和collections系列
查看>>
SQL Denali-FileTable
查看>>
C# 图像处理:复制屏幕到内存中,拷屏操作
查看>>
PHP微信支付流程
查看>>
linux下单节点oracle数据库间ogg搭建
查看>>