• scope.$apply是干嘛的


       开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢。

      JavaScript执行顺序

      JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结。

      每当有耗费时间较多的任务出现,例如等待一个click事件,等待Ajax请求的回应,我们都会设定一个回调函数,当click事件被触发或者计时器完成,就会创建一个新的JavaScript turn,并执行完回调函数。

    例如:

    var button = document.getElementById('clickMe');
    function buttonClicked () {  
       alert('the button was clicked');  
        }
    button.addEventListener('click', buttonClicked);  
    
    function timerComplete () {  
      alert('timer complete');  
    }
    setTimeout(timerComplete, 2000);    

      当JavaScript代码开始运行,先找到一个botton,并添加一个点击的监听事件,且设定一个timeout。浏览器会在这段代码执行完毕之后进行web的更新,并且接受用户的输入。

      如果浏览器检测到一个新的点击事件发生,他就会开始一个turn,来执行buttonClicked函数。当函数执行结束,这个阶段也随之结束。

      经过2000毫秒,浏览器会创建一个过程来执行timerComplete。在这两个过程之间,页面被重绘,输入被接收。

      如何来更新绑定数据

       Angular为我们提供了一些接口来绑定JavaScript代码与数据,Angular 采用任何数据可以用来绑定,并在JavaScript的末位运行并进行,并检查数据更新。

      进行数据变化检查的实际上是$digest函数,但是通常我们不是直接使用$digest函数,而是使用$apply,$apply函数接收表达式或者函数作为参数后调用$digest来更新监控器。

      那我们究竟要什么时候来调用$apply呢,实际上,Angular几乎在所有提供的代码中添加了$apply,如ng-click,初始controller,$http的回调操作,在这,你并不需要亲自调用 $apply,而且重复的调用会引起错误。

      因此,当你运行了一个新阶段,并且这部分并不属于Angular库的情况下才需要使用$apply。这有一段关于setTimeout的代码,在经过了2000毫秒的延迟之后,代码进入执行了一个新的阶段,但是Angular并不知道数据有更新,因此更新并不会被显示。

      

    function Ctrl($scope) {  
        $scope.message = "等2秒后进行更新";
    
        setTimeout(function () {
            $scope.message = "时间到";
            // AngularJS unaware of update to $scope
        }, 2000);  
    }
    

       

      为了方便大家的使用,Angular提供了$timeout来代替setTimeout,相当于在其中默认调用$apply

      如果在你的代码中使用了除$http之外的Ajax调用,除了ng-*之外的监听器,或者除了$timeout之外的计时器,都应该使用$scope.$apply来同步显示绑定。

      小伙伴,你听明白了么? O(∩_∩)O

  • 相关阅读:
    如何通过一行代码制作个人专属动态微信二维码?
    小白学 Python 数据分析(14):Pandas (十三)数据导出
    小白学 Python 数据分析(13):Pandas (十二)数据表拼接
    小白学 Python 数据分析(12):Pandas (十一)数据透视表(pivot_table)
    小白学 Python 数据分析(11):Pandas (十)数据分组
    小白学 Python 数据分析(10):Pandas (九)数据运算
    小白学 Python 数据分析(9):Pandas (八)数据预处理(2)
    小白学 Python 数据分析(8):Pandas (七)数据预处理
    小白学 Python 数据分析(7):Pandas (六)数据导入
    小白学 Python 数据分析(6):Pandas (五)基础操作(2)数据选择
  • 原文地址:https://www.cnblogs.com/fangshidaima/p/6048071.html
Copyright © 2020-2023  润新知