当前位置:首页 > 日记 > 正文

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

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

前言

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

总结

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

相关文章

QQ邮箱的附件如何下载图文教程

QQ邮箱的附件如何下载图文教程

图文教程,教程,邮件,附件,邮箱,  QQ邮箱提供的便捷的收发送文件,当我们收到邮件带有附件的时候,该怎么下载这个附件呢?以下是小编给大家整理的QQ邮箱附件的下载方法教程,希望能帮到你!QQ邮箱附件的下载方法教程1.首先打开您的QQ,点击“Q…

PS怎么设计一款私人订制的兰花杯子

PS怎么设计一款私人订制的兰花杯子

兰花,效果图,杯子,订制,私人,想要出售买家提供图片的订制杯子,怎样用PS做好效果图呢?价格标签放置放在杯子图上什么位置合理呢?本文将详细介绍每一个细节。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041…

jquery 键盘事件的使用方法详解

jquery 键盘事件的使用方法详解

键盘事件,使用方法,详解,电脑软件,jquery,jquery 键盘事件的使用方法详解jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:jquery 代码:1. keydown();2. keyup(); 3. keypress(); keydown()keydown事件会在键盘按下时触发,可以…

微信小程序 获取javascript 里的数

微信小程序 获取javascript 里的数

数据,程序,电脑软件,微信小,javascript,微信小程序 获取javascript 里的数据wxml如何获取js里的数据例:wxml里:<text id="twl">{{txt}}</text>通过上面的{{txt}}可以对应获取js里data下定义的txt的值js里:data: { txt:{} }首先在data里定…

Excel中2010版进行单元格转换成的

Excel中2010版进行单元格转换成的

操作技巧,转换成,单元格,操作步骤,图片,  Excel中怎么将单元格转换成图片,具体该怎么去进行操作的呢?今天,小编就教大家在Excel中2010版进行单元格转换成图片的操作技巧。Excel中2010版进行单元格转换成图片的操作步骤进入EXCEL2010,打开一…

jQuery遮罩层实例讲解

jQuery遮罩层实例讲解

遮罩层,实例,电脑软件,jQuery,本文实例为大家分享了jQuery遮罩层展示的具体代码,供大家参考,具体内容如下1.1 背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:/* 半透明的遮罩层 */#overlay…

详解Node.js中exports和module.exp

详解Node.js中exports和module.exp

详解,区别,电脑软件,Node,exports,今天看了下node.js的require方法的源码,终于搞清楚exports和module.exports的区别了。我们知道,node.js的模块暴露有两种方法。1. 方式一:用exports//a.js exports.log =function (str) { console.log(str);…

轻松理解JavaScript闭包

轻松理解JavaScript闭包

闭包,轻松,电脑软件,JavaScript,摘要闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包一、什么是闭包?闭包就是可以访问另一个函数作用域中变量的函数。下面列举出常见的闭包实现方式,以例子讲解闭包概念function f1(){ …

Indesign怎么转曲文字并高清打印?

Indesign怎么转曲文字并高清打印?

文字,技巧,电脑软件,Indesign,高清,Indesign排版好的文件如果直接打印会出现打印不清晰的问题,需要将文字转曲并导出为pdf文件,下面我们就来看看详细的教程。软件名称:Adobe InDesign CC 2017 v12.0.0 中文破解版(附破解补丁) 32位软件大小:748…

基于input框覆盖掉数字英文的实例

基于input框覆盖掉数字英文的实例

覆盖,数字,英文,实例,电脑软件,例子1:<input type="text" value="0" onkeyup="cleartwoNum(this)">//限制input框输入只能数字:function cleartwoNum(obj) { obj.value = obj.value.replace(/[^\d]/g, '');}例子2:可以输入金额<inp…

详解webpack+vue-cli项目打包技巧

详解webpack+vue-cli项目打包技巧

项目打包,详解,技巧,电脑软件,cli,1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js、css等的版本控制?设置build文件夹下的web…

Visual studio 2017添加引用时报错

Visual studio 2017添加引用时报错

加载,解决方法,引用,时报,正确,最近新装了2017,开始前几天还好,可是最近在添加引用时,报错---------------------------Microsoft Visual Studio---------------------------未能正确加载“ReferenceManagerPackage”包。此问题可能是因配置更…