AngularJS scope 作用域的问题

这两天写的项目用到一个古老的前端框架AngularJS, 然后遇到了一个神奇的问题,对于我这种前端小白来说,也是花了大半天才解决。还是记录一下吧。

问题背景:AngularJS模型提供一个$scope变量,可以用来实现数据的双向绑定。

问题描述: 在使用了JQuery提供的fileupload文件上传框架后,想在文件成功上传后的回调函数done中改变scope变量的值,但是发现直接修改并没有成功。断点调试的时候发现在回调函数里

又确实是可以访问到,这就很神奇了。

原理和解决方法:Angular为我们提供了一些接口来绑定JavaScript代码与数据,Angular 采用任何数据可以用来绑定,并在JavaScript的末位运行并进行,并检查数据更新。

进行数据变化检查的实际上是$digest函数,但是通常我们不是直接使用$digest函数,而是使用$apply,$apply函数接收表达式或者函数作为参数后调用$digest来更新监控器。

那我们究竟要什么时候来调用$apply呢,实际上,Angular几乎在所有提供的代码中添加了$apply,如ng-click,初始controller,$http的回调操作,在这,你并不需要亲自调用 $apply,而且重复的调用会引起错误。因此,当你运行了一个新阶段,并且这部分并不属于Angular库的情况下才需要使用$apply。这有一段关于setTimeout的代码,在经过了2000毫秒的延迟之后,代码进入执行了一个新的阶段,但是Angular并不知道数据有更新,因此更新并不会被显示。 选自 https://www.jb51.net/article/119643.htm

总结一下,就是调用了除AngularJS之外的库时,需要用$apply去把整个函数包住来监视模型变量的变化,从而维护双向绑定。

原文地址:https://www.cnblogs.com/singular/p/10982294.html

时间: 2024-08-29 18:58:44

AngularJS scope 作用域的问题的相关文章

AngularJS Scope(作用域)

1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 2. 使用Scope:在 AngularJS 创建控制器时,你可以将 $Scope 对象当作一个参数传递 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

AngularJS&ndash;Scope(作用域)

Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DOM树的各个层级上.作用域Scope可以监控表达式也可以广播事件(监控表达式,就是WPF中的属性变更通知,相当有作用哟!).     Scope的特点 Scope有一个监控方法($watch),用它来监视model(模型)的变化,也就是上面所说的监视并做变更通知. Scope有一个($apply)方法,我们用它就可以去执行一些来自非Angular的代码,或者第三方内库功能.它的好处就是让第三方函数加入了Angu

Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题

Angularjs MVC 以及 $scope 作用域 Angularjs 模块的 run 方法 以及依赖注入中代码压缩问题 1. Angularjs MVCModel:数据模型层View:视图层,负责展示Controller:业务逻辑和控制逻辑优点: 代码模块化 代码逻辑比较清晰.可移值性高,后期维护方便.代码复用,代码规模越来越大的时候,切分职责是大势所趋缺点:运行效率稍微低一些2. Angularjs $scope 作用域1. $scope 多控制器单独作用域<!DOCTYPE html>

AngularJs(五)从Controller控制器谈谈$scope作用域

大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp"> <head> <

angularJs的作用域和依赖注入

一.angularJs的作用域 <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>angular概述</title> <script src="angular.min.js"></scr

Angularjs $scope 里面的$apply 方法 和 $watch 方法

Angularjs $scope 里面的$apply 方法 和 $watch 方法 学习要点:1. Angularjs $scope 里面的$apply 方法2. Angularjs $scope 里面的$watch 方法 1. Angularjs $scope 里面的$apply 方法$apply 方法作用:Scope 提供$apply 方法传播 Model 的变化$apply 方法使用情景:AngularJS 外部的控制器( DOM 事件.外部的回调函数如 jQuery UI 空间等)调用了

关于Scope作用域范围

举个例子,如下: public class C { public int a = 2; public void test(int b) { int c = 3; for (int d = 3; a < 6; a++) { } } } 形成的Scope作用域如下图: 属性table中存储的具体数据如下截图:

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

angularJS 指令scope作用域

http://www.angularjs.cn/A09C 以下方式会创建新的子作用域,并且进行原型继承: ng-repeat.ng-include.ng-switch.ng-view.ng-controller, 用scope: true和transclude: true创建directive. 以下方式会创建新的独立作用域,不会进行原型继承:用scope: { ... }创建directive.这样创建的作用域被称为"Isolate"作用域. 注意:默认情况下创建directive使