$rootScope.$apply()

最新推荐文章于 2023-11-11 05:00:00 发布
原创 最新推荐文章于 2023-11-11 05:00:00 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了AngularJS中双向数据绑定的工作原理，并详细解释了如何通过调用$rootScope.$apply()来触发$digest循环，确保数据变化能够及时反映到视图中。此外，还讨论了为何在多个控制器共用服务的情况下选择$rootScope而非特定作用域。
 resolveDependencies = function ($q, $rootScope, dependencies) {
                var defer = $q.defer();
                require(dependencies, function () {
                    defer.resolve();
                    $rootScope.$apply()//
                });


                return defer.promise;

            };

我们都知道AngularJS 的一个很重要的特新是双向数据绑定，双向数据绑定意味着当view中有任何数据发生了变化，那么这个变化也会自动地反馈到scope数据上，反之一样，当scope模型数据发生变化，也会反映在view中更新。那这个是如何实现的呢？在调用$scope.$apply()后，启动$rootScope.$digest().所以。一轮$digest循环在$rootScope开始，随后会访问所有的children scope中的watchers.当一个watcher被触发时，AngularJS会检测scope模型，如果发生改变则调用相应的回掉函数。
那好了，为什么用$rootScope.$apply();而不是$scope.$apply().用$rootScope是因为当我多个controllers使用同一个service的时候不用担心service使用哪个scope

[AngularJS面面观] 5. scope中的两个异步方法 - $applyAsync以及$evalAsync
不忘初心，好好沉淀
06-08 2万+
Angular中digest循环的主干是对于watchers的若干次遍历，直到整个scope中的数据”稳定”下来，这部分实现在这篇文章中已经进行了详尽的介绍。相关的一些细节优化也在这篇文章中进行了分析。除了主干的内容，digest循环的内容其实还包括几个比较有趣的部分，比如这一节我们即将分析的$evalAsync以及$applyAsync，下面我们就来通过相关源代码来分析一下：$digest: fu
Angular项目中$scope.$apply()方法的使用详解
01-19
前言 相信大家在一开始用angular做项目的时候，一定碰到过$scope.$apply()方法，表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢。下面话不多说，来一起看看详细的介绍吧。 JavaScript执行顺序 JavaScript单线程操作，代码按照代码片段的顺序来之行，每个代码块从运行到结束都不会被打断，这也是为什么会发生浏览器阻塞的情况，往往是有一部分在运行，而导致其他所有的代码段冻结。 每当有耗费时间较多的任务出现，例如等待一个click事件，等待Ajax请求的回应，我们都会设定一个回调函数，当click事件被触发或者计时器完成，就会创建一个新
angularJs $timeout $rootscope 以及 $apply
caideb的博客
11-27 328
1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.js"></script> </head> <body> <div n
$rootScope、$apply、$watch
weixin_30564901的博客
03-27 147
$rootScope：$rootScope是所有$scope对象的最上层，对全部controller有效 app.run(function ($rootScope) { $rootScope.sex = "男"; }); 也可以用在控制器内； $apply：AngularJs外部的控制器（DOM事件、外部的回调函数如JQuery UI等第三方控件），调用A...
angular-pouchdb:PouchDB 的 Angular 包装器，确保在 $rootScope.$apply() 内调用回调，并使用 $q 承诺而不是回调。 最重要的是，它支持类似`ng-repeat`的指令来遍历数据库的内容
07-02
AngularJS PouchDB 支持 谨慎的话 我不再维护这个项目。 从好的方面来说，这个项目已经分叉了很多次。 @tlvince 。 @RangerRick 也 . 这个版本对旧版本的 PouchDB 做了什么 （演示了使用 Angular PouchDB 和 ...
AngularJS报错$apply already in progress的解决方法分析
01-19
本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考，具体如下： ...Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.3.13/$r
/** * Created by wupeng5 on 2016/5/9. */ var app = angular.module("app",['ui.router','oc.lazyLoad','tableKillModule','selectModule',"select2Module"]).config(function($stateProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$urlRouterProvider,$httpProvider){ $urlRouterProvider.otherwise('login'); //引入$stateProvider对象，为动态路由做准备 app.register = { stateProvider:$stateProvider } //$locationProvider.html5Mode(true); $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; $httpProvider.defaults.headers.common["Accept"] = 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'; $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'; $httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) { value = obj[name]; if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value !== undefined && value !== null) { query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } } return query.length ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; //配合nginx处理本地开发, 服务器调式的问题(接口是跨域的) $httpProvider.interceptors.push(function($q){ return { 'request':function(config){ if(config.url.indexOf('html') == -1){ config.url = "" + config.url; } return config || $q.when(config); } } }); //注销RootScope上面的广播事件 //var deregister = $rootScope.$on("rootEvent", function(event,data) { // //}); // //$scope.$on('$destory', function() { // deregister(); // 退订事件 //}); //注册$onRootScope方法，并在执行完毕后直接销毁, 防止内存溢出 $provide.decorator('$rootScope',['$delegate',function($delegate){ Object.defineProperty($delegate.constructor.prototype,'$onRootScope',{ value:function(name,listener){ var unsubscribe = $delegate.$on(name,listener); this.$on('$destroy',unsubscribe); }, enumerable:false }); return $delegate; }]) //使用,不需要手动去销毁这个事件 //$scope.$onRootScope("key",function(){ // console.log("get key"); //}) //$rootScope.$broadcast("key",{name:1}); }); app.factory('timestampMarker', [function() { return { request: function(config) { config.requestTimestamp = new Date().getTime(); return config; }, response: function(response) { response.config.responseTimestamp = new Date().getTime(); return response; } }; }]); app.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('timestampMarker'); }]); //$http.get('xxxx').then(function(response) { // var time = response.config.responseTimestamp - response.config.requestTimestamp; // console.log('The request took ' + (time / 1000) + ' seconds.'); //}); //当路由变化的时候触发 app.run(function($rootScope,$templateCache) { $rootScope.isLogin = true; $rootScope.loginStyle = ""; $rootScope.$on('$stateChangeStart', function (event, current, previous) { if(current.name != "login" && $rootScope.currentState != current.name){ // console.log($rootScope.currentState); $rootScope.currentState = current.name; } //清理所有template缓存 if (typeof(current) !== 'undefined'){ $templateCache.removeAll(); } $rootScope.currentName = current.name; if($rootScope.currentName == "login"){ $rootScope.isLogin = false; $rootScope.loginStyle = "login"; $rootScope.col = ""; }else{ $rootScope.isLogin = true; $rootScope.loginStyle = ""; } }); });代码审计一下
最新发布
08-23
- 检查是否使用了`$scope.$apply`或`$scope.$digest`的不当调用，可能导致多次脏检查循环。 2. **性能优化**： - 使用一次性绑定（`::`）在可能的地方，减少观察者数量。 - 避免在模板中使用函数，因为每次脏...
理解Angular中的$apply()以及$digest()
热门推荐
不忘初心，好好沉淀
08-20 10万+
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么，以及在日常的编码中如何应用它们。 探索$apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据
AngularJs学习笔记(3)--$scope中的$apply和$digest方法
weixin_33919941的博客
06-12 163
首先，我们利用angular在页面上输出当前的时间，这个并不难，代码如下：<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> </head> <body> <divng-app=""> <divn...
AngularJS 指令scope作用域问题，$apply
KingCruel的专栏
03-23 1435
项目中发现了一个很奇怪的问题，怎一个郁闷了的.... 问题如下 controller中定义了一个变量，$scope.test = "123"; 接着定义一个指令，触发事件改变$scope.test = “666666” 此时，$scope.test可以成功修改，输出666666 然后定义了一个$scope.gotest = function(){}函数输出$scope.test，可是，
Angularjs $scope 里面的$apply方法
Inuyasha1121的专栏
04-07 1799
$apply 方法作用：Scope 提供$apply 方法传播 Model 的变化$apply 方法使用情景：AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等），$apply 就是用来做这件事情的。$apply 方法注意事项：...
使用$scope.$apply()进行DOM重绘
王扬扬的博客
10-19 1210
问题： 文件改变之后，文件名无法实时更新到页面上； &lt;div&gt; &lt;input type="file" id='file' onchange="angular.element(this).scope().fileChange(this)" data-index="{{$index}}" ng-model="filesNameArr[...
$scope.$apply() 按需要强制渲染前端页面
Keep moving on.
11-04 8311
虽然angularJS可以实现双向数据绑定，但有时，数据发生改变的时候前端页面展示的信息并不会更新，这时就可以借助$scope.$apply() 强制重新渲染。 见小案例： &lt;!DOCTYPE HTML&gt; &lt;html ng-app&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ...
JS - Angular项目中$scope.$apply()方法的使用详解
qq_37131747的博客
09-13 794
相信大家在一开始用angular做项目的时候，一定碰到过$scope.$apply()方法，表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢?
Angularjs $scope 里面的$apply方法 和 $watch方法
Christine95的博客
10-17 5572
1. Angularjs $scope 里面的$apply 方法 $apply 方法作用： Scope 提供$apply 方法传播 Model 的变化 $apply 方法使用情景： AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（
angularjs基础—$scope.$apply的应用
skyxuyan的专栏
10-09 892
$apply() 和 $digest() 在 AngularJS 中是两个核心概念。 AngularJS 提供了一个非常酷的特性叫做双向数据绑定 (Two-way Data Binding) ，这个特性大大简化了我们的代码编写方式。 数据绑定意味着当 View 中有任何数据发生了变化，那么这个变化也会自动地反馈到 scope 的数据上，也即意味着 scope 模型会自动地更新
一看就懂的$scope.$apply
IT枫斗者的博客
11-11 535
1：针对不知道怎么面试，面试没有信心的小伙伴，我们会给你一个offer保障。2：我们会监督你15-20天内把面试体系技术点掌握至少7成，这样足够你去找到满意的工作了。3：我们是面向面试学习指导，不会带你们去写代码，会把项目真实开发的迭代过程和技术细节如何实现业务功能都详细教清楚，你能在面试中流畅表达清楚就行了，项目经验你不用担心(技术老师提供的真实项目经验肯定拿的出手)，自己学和别人带着系统学，效率完全不一样。详情请点击这里offer突击训练营，给你一个offer的保障，求职跳槽的看过来！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值