在AngularJS开发中,何时应该调用$scope.$apply(),何时不应该调用。下面我们透彻地解释这个问题。
但是首先,让我们把$apply转换成一种简化的形式。
scope.$apply就像一个懒惰的工人。它需要按照命令去做很多工作,并且要负责保证所有绑定关系都获得了刷新,同时还要保证发生的所有变化都反映到了视图上。但是它不会每时每刻都做这些事情,而是当它感觉到有足够多的工作需要做时才会去做。在其他时间里,它只是在那儿打盹,把工作记下来留着以后做。只有当你引起它的注意,并且明确要求它去做时,它才会真正去做。在AngularJS的生命周期中,框架会按照固定的时间间隔来提醒这个服务,但是,对于外部发生的调用(例如来自jQuery的UI事件),scope.$apply只会记录一下,并不做什么。这就是为什么我们必须自已调用scope.$apply来命令它干活的原因:“嗨!你现在就必须做这件事情,不要等!”。
关于何时(以及如何)调用$apply,以下是四点简单的提示:
a.不要频繁调用它。当AngularJS正在快乐地滴滴答答运行(处于它的$digest周期中)的时候,调用$apply将会引起错误。所以,在这里你不能抱有“宁可事先谨慎有余,不要事后追悔莫及“的信条。
b.当AngularJS外部的控制器(DOM事件、外部的回调函数如jQuery UI空间等)调用了AngularJS函数之后,必须调用$apply。在这种情况下,你需要命令AngularJS刷新自已(模型、视图等),$apply就是用来做这件事情的。
c.只要可以,请把要执行的代码和函数传递给$apply去执行,而不要自已执行那些函数然后再调用$apply。例如,你应该像下面这样来执行你的代码:
$scope.$apply(function() { $scope.variable1 = 'some value'; executeSomeAction(); });
而不是这样:
$scope.variable1 = 'some value'; executeSomeAction(); $scope.$apply();
这两种方式的运行效果相同,但是它们存在一个重大的不同点。
当调用executeSomeAction时,第一种方式会捕获所有错误,而第二种方式会忽略所有错误。所以,只有使用第一种方式,你才能获得AngularJS的错误通知。
考虑一下使用safeApply(https://codeerwall.com/p/ngisma)之类的方法:
$scope.safeApply = function(fn) { var phase = this.$root.$$phase; if(phase == '$apply' || phase == '$digest') { if(fn && (typeof(fn) === 'function')) { fn(); } }else { this.$apply(fn); } };
你可以把以上代码monkey patch到最顶层scope或者rootscope上,然后就可以在任何地方使用$scope.$safeApply函数了。
资料来源:《用AngularJS开发下一代Web应用》
相关推荐
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上...
主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下
主要介绍了AngularJS报错$apply already in progress的解决方法,较为详细的分析了报错$apply already in progress的原理、处理技巧与相关注意事项,需要的朋友可以参考下
主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下
今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢,真的更新...
AngularJS的核心功能是范围,变量和绑定的使用。 在代码级别更新值并回显DOM或应用程序的过程围绕着对范围运行摘要来查看发生了什么变化以及什么仍然是相同的。 为了运行摘要,Angular在应用程序的整个生命周期中...
AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...
主要给大家介绍了关于Angular项目中$scope.$apply()方法使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angularjs具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。
主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑。而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么,以及在...
├最新AngularJS开发宝典—第061讲 使用$scope.$apply进行数据脏检查.mp4 ├最新AngularJS开发宝典—第062讲 $timeout与$interval实际使用场景分析与实例讲解.mp4 ├最新AngularJS开发宝典—第063讲 $window服务的...
$apply()和$digest()介绍 AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地...