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


Posted in Javascript onJuly 26, 2017

前言

相信大家在一开始用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来同步显示绑定。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript中设置默认参数值示例
Sep 11 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
react的hooks的用法详解
Oct 12 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
You might like
PHP中include()与require()的区别说明
2010/03/10 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
详解Python:面向对象编程
2019/04/10 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
python文字转语音实现过程解析
2019/11/12 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
企业元宵节主持词
2014/03/25 职场文书
师德模范事迹材料
2014/06/03 职场文书
运动员入场前导词
2015/07/20 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Django操作cookie的实现
2021/05/26 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android