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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
js针对图片加载失败的处理方法分析
Aug 24 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+dbfile开发小型留言本
2006/10/09 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP递归算法的简单实例
2019/02/28 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
Node.js简单入门前传
2017/08/21 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
python中set常用操作汇总
2016/06/30 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
工作态度检讨书
2014/02/11 职场文书
计划生育证明书写要求
2014/09/17 职场文书
借条如何写
2015/05/26 职场文书
文明礼仪主题班会
2015/08/13 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js