AngularJS中的$apply，怎么用

admin

   在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。例如，你应该像下面这样来执行你的代码：

1. 
   
2. $scope.$apply(function() {
   
3. $scope.variable1 = 'some value';
   
4. executeSomeAction();
   
5. });
   

复制代码

        而不是这样：

1. 
   
2. $scope.variable1 = 'some value';
   
3. executeSomeAction();
   
4. $scope.$apply();

复制代码

        这两种方式的运行效果相同，但是它们存在一个重大的不同点。


        当调用executeSomeAction时，第一种方式会捕获所有错误，而第二种方式会忽略所有错误。所以，只有使用第一种方式，你才能获得AngularJS的错误通知。


        考虑一下使用safeApply(https://codeerwall.com/p/ngisma)之类的方法：

1. 
   
2. $scope.safeApply = function(fn) {
   
3. var phase = this.$root.$phase;
   
4. if(phase == '$apply' || phase == '$digest') {
   
5. if(fn && (typeof(fn) === 'function')) {
   
6. fn();
   
7. }
   
8. }else {
   
9. this.$apply(fn);
   
10. }
    
11. };

复制代码

        你可以把以上代码monkey patch到最顶层scope或者rootscope上，然后就可以在任何地方使用$scope.$safeApply函数了。