开始用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

scope.$apply是干嘛的的更多相关文章

  1. Angularjs的$apply及其优化使用

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

  2. 转:js中this、call、apply的用法

    (一)关于this首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象.这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)1.首先看下 ...

  3. js call 以及apply

    用实例来讲:一半什么场合用到bind.call.apply呢? [一个对象 A]的方法被[另一个对象 B][引用]的时候(请注意 引用 的意思,区分调用 ):[对象A]的方法内的this作用域就不指向 ...

  4. JS中call、apply、bind使用指南,带部分原理。

    为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...

  5. 来聊聊apply和call

    今天在群里讨论的时候,看到有人问apply怎么使用,突然想起自己刚接触这个方法的时候,也是一样的摸不着头脑. 记得当时上网看了很多讲解,可实际用的时候还是感觉有些蒙蒙哒orz.... 后来想一想,也许 ...

  6. angularJS之$apply()方法

    这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...

  7. luci页面“save&apply”的实现分析

    页面上配置的“保存&应用”功能的实现: 最终调用到/etc/config/ucitrack的配置文件. 例如配置无线时,对应ucitrack配置文件中的config network    op ...

  8. js1中call和apply的用法

    js1中call和apply的用法 е辊顷 饼蹭瑭 岚辗疥 碜坪命 笛攮鼠 鲳篝等 ざ遛膜 镀鞭冢蒯 晕 册薷濑 就不是抓了而是人拳啪啪两声两个人都被拳头打在了腿骨 许郾犍 国 ...

  9. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

随机推荐

  1. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  2. 当忘记mysql数据库密码时如何进行修改

    因为长时间没有使用数据库了,或者把密码改完之后就忘了数据库密码,不能正常进入数据库,也无法修改密码,有一个简单的常用修改密码方式: 1.首先找到和打开mysql.exe和mysqld.exe所在的文件 ...

  3. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  4. 基于fis3的组件可视化道路

    首先说明一下,即使不熟悉fis3,阅读文本应该也会有所收获. 本文以fis-parser-imweb-tplv2插件为模板插件,目的不在于使用哪个模板,而是组件可视化的实现思路,不必担心. 先说说模板 ...

  5. Mybatis批量删除

    <delete id="deleteByStandardIds"> delete from t_standard_catalog where standard_id i ...

  6. 港真,到底应该选择OA还是BPM?

    越来越多企业意识到流程管理的重要性,但是,选择OA还是BPM,却让他们产生了选择困难症. 一方面,企业皆注重流程的高效运转,最好内外部的业务都能用一个系统来解决.所有流程一天就能上线什么的,那就更好啦 ...

  7. Linux基础介绍【第五篇】

    linux权限位 Linux文件或目录的权限位是由9个权限位来控制,每三位为一组,它们分别是文件属主权限.属组权限.其他用户权限. r:read可读权限,对应数字4: w:write可写权限,对应数字 ...

  8. 机器指令翻译成 JavaScript —— No.6 深度优化

    第一篇 中我们曾提到,JavaScript 最终还得经过浏览器来解析.因此可以把一些优化工作,交给脚本引擎来完成. 现代浏览器的优化能力确实很强,但是,运行时的优化终归是有限的.如果能在事先实现,则可 ...

  9. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  10. 我的公司培训讲义(1):.NET开发规范教程

    这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...