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 图像动画的小demo
May 23 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
JavaScript实现点击图片换背景
Nov 20 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php的header和asp中的redirect比较
2006/10/09 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python web框架学习笔记
2016/05/03 Python
怎样使用Python脚本日志功能
2016/08/14 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
matplotlib实现区域颜色填充
2019/03/18 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
任课老师推荐信范文
2013/11/24 职场文书
阳光体育活动方案
2014/02/16 职场文书
市场推广策划方案
2014/06/02 职场文书
日语系毕业求职信
2014/07/27 职场文书
培训感想范文
2015/08/07 职场文书
小学班主任工作随笔
2015/08/15 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Ajax实现异步加载数据
2021/11/17 Javascript