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来同步显示绑定。

总结

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

赞 (0)

相关推荐

  • angularJS 中$scope方法使用指南

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

  • AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

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

    前言 相信大家在一开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢.下面话不多说,来一起看看详细的介绍吧. JavaScript执行顺序 JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结. 每当有耗费时间较多的任务出现,例如等待一个click事件,等

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • Eclipse中改变默认的workspace的方法及说明详解

    eclipse中改变默然的workspace的方法可以有以下几种: 1.在创建project的时候,手动选择使用新的workspace,如创建一个web project,在向导中的Location选项,取消使用"Use default location",同时在下面选择新的workspace. 2.在file菜单中选择switch workspace项,即可选择一个新的workspace 3.在eclipse安装目录下configuration/.settings目录下的 org.ec

  • Android ListView里控件添加监听方法的实例详解

    Android ListView里控件添加监听方法的实例详解 关于ListView,算是android中比较常见的控件,在ListView我们通常需要一个模板,这个模板指的不是住模块,而是配置显示在ListView里面的东西,今天做项目的时候发现想要添加一个ImageView监听方法,发现崩了,也许是好久没有动ListView竟然忘了不能直接在主UI的xml文件里面调用其他xml文件的控件,哪怕ListView用的是这个xml文件. [错误示范]: 直接调用ImageView这个控件是ListV

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • 如何利用@angular/cli V6.0直接开发PWA应用详解

    如何利用@angular/cli V6.0直接开发PWA应用详解

    什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • Java 添加Word目录的2种方法示例代码详解

    目录是一种能够快速.有效地帮助读者了解文档或书籍主要内容的方式.在Word中,插入目录首先需要设置相应段落的大纲级别,根据大纲级别来生成目录表.本文中生成目录分2种情况来进行: 1.文档没有设置大纲级别,生成目录前需要手动设置 2.文档已设置大纲级别,通过域代码生成目录 使用工具: •Free Spire.Doc for Java 2.0.0 (免费版) •IntelliJ IDEA 工具获取途径1:通过官网下载jar文件包,解压并导入jar文件到IDEA程序. 工具获取途径2:通过Maven仓

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

随机推荐