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

发布时间 - 2026-01-11 02:31:19    点击率:

前言

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

总结

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


# angular  # scope  # apply  # angularjs  # scopeapply  # 方法  # angularJS中$apply()方法详解  # Angularjs中的$apply及优化使用详解  # AngularJS中$apply方法和$watch方法用法总结  # angular4强制刷新视图的方法  # 对angular 实时更新模板视图的方法$apply详解  # 绑定  # 就会  # 回调  # 在这  # 计时器  # 创建一个  # 是一个  # 是有  # 什么时候  # 当你  # 会在  # 并在  # 这段  # 这部  # 较多  # 上看  # 这篇文章  # 在一  # 谢谢大家  # 多说 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  Thinkphp 中 distinct 的用法解析  ,交易猫的商品怎么发布到网站上去?  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  如何在香港服务器上快速搭建免备案网站?  如何快速查询域名建站关键信息?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  如何在Windows服务器上快速搭建网站?  如何快速生成ASP一键建站模板并优化安全性?  如何在Windows环境下新建FTP站点并设置权限?  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  php打包exe后无法访问网络共享_共享权限设置方法【教程】  如何在宝塔面板创建新站点?  千库网官网入口推荐 千库网设计创意平台入口  LinuxCD持续部署教程_自动发布与回滚机制  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  如何在阿里云香港服务器快速搭建网站?  Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法  如何在服务器上三步完成建站并提升流量?  英语简历制作免费网站推荐,如何将简历翻译成英文?  C++时间戳转换成日期时间的步骤和示例代码  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册?  如何彻底删除建站之星生成的Banner?  标题:Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  如何快速使用云服务器搭建个人网站?  如何挑选优质建站一级代理提升网站排名?  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  Laravel怎么上传文件_Laravel图片上传及存储配置  PHP 500报错的快速解决方法  如何在IIS管理器中快速创建并配置网站?  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  如何用美橙互联一键搭建多站合一网站?  QQ浏览器网页版登录入口 个人中心在线进入  如何生成腾讯云建站专用兑换码?  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  简单实现jsp分页  中山网站制作网页,中山新生登记系统登记流程?  JS实现鼠标移上去显示图片或微信二维码  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  googleplay官方入口在哪里_Google Play官方商店快速入口指南  高端建站三要素:定制模板、企业官网与响应式设计优化