`

AngularJS中的$apply,用还是不用?

阅读更多

        在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方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上...

    angularjs 中$apply,$digest,$watch详解

    在AngularJS中,$apply,$digest和$watch是核心的脏检查机制,它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法,它的主要...

    AngularJS报错$apply already in progress的解决方法分析

    如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和...

    angularJS中$apply()方法详解

    例如,如果我们有一个$timeout服务来替代原生的setTimeout,那么在回调函数中更改数据模型后,就不需要使用$apply()了,因为AngularJS的$timeout服务已经内置了$apply()的调用。 $apply()方法的典型调用形式如下: ...

    理解$watch ,$apply 和 $digest --- 理解数据绑定过程

    在AngularJS中,数据绑定是框架的核心特性之一,它使得视图与模型之间的交互变得简单。$watch,$apply和$digest是实现双向数据绑定的关键机制。本文将深入探讨这三个概念,帮助你更好地理解AngularJS的数据绑定过程...

    Angularjs中的$apply及优化使用详解

    今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢,真的更新...

    AngularJS-Scope.SafeApply:AngularJS $ scope。$ apply()没有麻烦和错误

    AngularJS的核心功能是范围,变量和绑定的使用。 在代码级别更新值并回显DOM或应用程序的过程围绕着对范围运行摘要来查看发生了什么变化以及什么仍然是相同的。 为了运行摘要,Angular在应用程序的整个生命周期中...

    angularJS 中$scope方法使用指南

    当从非AngularJS代码中修改$scope变量时,需要使用$scope.$apply()来确保AngularJS的数据绑定更新视图。 ```javascript $scope.$apply(function() { $scope.message = "Data changed"; }); ``` #### $scope.$...

    AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    当我们在AngularJS应用中使用JavaScript原生的DOM事件处理器或 setTimeout、setInterval等方法时,我们需要手动调用$apply方法,来触发AngularJS的$digest循环,这样就能保证数据变化能够被正确地反映到视图上。...

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

    如果开发者在AngularJS应用的外部执行代码并希望这个代码执行后能够更新视图,那么就需要使用$apply()。例如,当开发者使用JavaScript原生的AJAX调用而不是AngularJS内置的$http服务时,就需要在成功回调函数中手动...

    说说AngularJS中的$parse和$eval的用法

    在AngularJS中,$parse和$eval是两个关键的服务,它们与AngularJS的表达式处理密切相关。...在实际开发中,正确使用$parse和$eval可以帮助我们更好地控制数据流和视图更新,从而实现更灵活和高效的前端应用。

    浅谈关于angularJs中使用$.ajax的注意点

    然而,有时开发者可能会选择在AngularJS应用中使用$.ajax,可能是出于对jQuery某些功能的依赖,比如更灵活的跨域处理或特定的数据类型设置。本文将探讨在AngularJS中使用$.ajax时需要注意的关键点。 首先,从设计...

    Angular项目中$scope.$apply()方法的使用详解

    主要给大家介绍了关于Angular项目中$scope.$apply()方法使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angularjs具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。

    AngularJs定时器$interval 和 $timeout详解

    AngularJS作为一款流行的前端JavaScript框架,提供了许多有用的服务,其中包括了$interval和$timeout服务,这两个服务能够让我们在AngularJS应用程序中实现定时器功能。 首先,我们来讲解$interval服务。$interval...

Global site tag (gtag.js) - Google Analytics