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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Vue组件化开发思考
Feb 02 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP解决中文乱码
2017/04/28 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
起点页面传值js,有空研究学习下
2010/01/25 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
wxPython事件驱动实例详解
2014/09/28 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python实现感知机(PLA)算法
2017/12/20 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
抽奖活动主持词
2014/03/31 职场文书
临床医师个人自我评价
2014/04/06 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
论文答辩开场白大全
2015/05/27 职场文书
会计主管竞聘书
2015/09/15 职场文书
Python实现双向链表
2022/05/25 Python