AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨
前言
在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope时,出现了变量不一致的情况。如下图所示:
按照应用逻辑,“我的”角标变化应与“找药帮查询”角标变化一致。通过运行表明,“找药帮查询”角标存在变化异常的状况。通过阅读代码与调试,发现自己的业务逻辑存在问题。业务代码如下:
/* * 更新我的徽标 */ $rootScope.updateMyBadge = function() { if (localStorage.logined != '1') { $rootScope.mybadge = ''; }else{ if ($rootScope.medNoticeBadge_Sunny && $rootScope.medNoticeBadge_Sunny != 0 ) { $rootScope.mybadge = $rootScope.medNoticeBadge_Sunny; } else { $rootScope.mybadge = ''; } } } setTimeout(function(){ $rootScope.updateMyBadge(); },2*1000); // 2秒后执行
其中$rootScope.mybadge为相应角标变量。其值来自于全局变量$rootScope.medNoticeBadge_Sunny,而这个变量又来自于下面的方法体:
/* * 已响应查询找药小红点 */ $rootScope.updateMedNoticeBadge = function(num) { console.log(num); $rootScope.medNoticeBadge = 0; if (localStorage.getItem('medNoticeBadge')) { $rootScope.medNoticeBadge = Number(localStorage.getItem('medNoticeBadge')); $rootScope.medNoticeBadge += num; } else { $rootScope.medNoticeBadge += num; } localStorage.setItem('medNoticeBadge', $rootScope.medNoticeBadge); $rootScope.medNoticeBadge_Sunny = localStorage.getItem('medNoticeBadge'); $rootScope.medNoticeBadge = localStorage.getItem('medNoticeBadge'); if (!$rootScope.userinfo.logined) { localStorage.removeItem('medNoticeBadge'); $rootScope.medNoticeBadge = 0; } }
以上方法体又是通过如下语句调用的:
/* *初次查询找药状况查询信息(只调用一次) */ $rootScope.getmedNoticeBadge = function() { if (localStorage.logined == '1') { var data = { 'stat': "1" }; appCallServer($http, "9015", data, function(data) { localStorage.setItem('medNoticeBadge', 0); $rootScope.updateMedNoticeBadge(data.cnt); }, function(data) { console.log("9015_找药状况:" + data.errtext); }); } }; $rootScope.getmedNoticeBadge();
执行时出现了变量更新不及时的错误现象。导致角标显示异常。
通过阅读以上代码,发现变量均是通过rootScope传递的。为此自己通过延时执行角标变化的方法体。但这并不是一个良好的的项目组织层次。自己应该将控制角标变化的方法体封装成服务的形式,利用其单例特性解决数据不一致的情况。
自己尝试利用Factory单例特性创建服务,但是结果错误。代码如下:
myCtrl.factory('mybadgeService',function($http){ var mybadgeFactory = {}; mybadgeFactory.runMybadgeRequest = function(){ if (localStorage.logined == '1') { var data = { 'stat': "1" }; appCallServer($http, "9015", data, function(data) { console.log("9015_找药状况-查询成功:" + JSON.stringify(data)); return data.cnt; }, function(data) { console.log("9015_找药状况:" + data.errtext); return 0; }); } } return mybadgeFactory; });
参考文献:
1.http://www.xker.com/page/e2015/06/199141.html
美文美图
AngularJS进阶(三十四)Angular数据更新不及时问题探讨的更多相关文章
- Java进阶(三十四)Integer与int的种种比较你知道多少?
Java进阶(三十四)Integer与int的种种比较你知道多少? 前言 如果面试官问Integer与int的区别:估计大多数人只会说到两点:Ingeter是int的包装类,注意是一个类:int的初值 ...
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- AngularJS进阶(三十八)上拉加载问题解决方法
AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...
- 网站开发进阶(三十四)编码中的setCharacterEncoding 理解
编码中的setCharacterEncoding 理解 1.pageEncoding="UTF-8"的作用是设置JSP编译成Servlet时使用的编码. 2.contentType ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- AngularJS进阶(三十五)浏览器兼容性解决之道
浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
书海拾贝之特殊的ng-src和ng-href 在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下: 1) 浏览器加载静态HTML文件并解析为DOM: 2) 浏览器加载angular. ...
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
随机推荐
- 深入Java虚拟机(1)——Java体系结构
Java体系结构 Java体系结构包括四个独立但相关的技术: 1.Java程序设计语言 2.Java class文件格式 3.Java应用编程接口(API) 4.Java虚拟机 当编写并运行一个Jav ...
- (译)Objective-C 类属性
翻译自:Objective-C Class Properties 译者:Haley_Wong 由于Swift 3.0 出了太多令人兴奋的新特性,人们很容易忽略 Objective-C中的小改动.苹果展 ...
- sklearn:聚类clustering
http://blog.csdn.net/pipisorry/article/details/53185758 不同聚类效果比较 sklearn不同聚类示例比较 A comparison of the ...
- [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
mzPivotGrid 是一个报表组件,采用这个组件之后,可以令你的应用体现更多的价值. 什么是pivot grid 什么是mzPivotGrid 学习资源 与图表组件的融合 什么是pivot gri ...
- BI Publisher(rtf)模板开发语法大全
Rtf模板开发例如背景,纹理分栏等等功能都能用word工具实现不再具体总结大家可以参考word教程..... 一.组 定义一个组的目的是告诉XMLPublisher对重复的数据行进行循环显示,也就 ...
- java基础知识——网络编程、IO流
IO流 字节流:处理字节数据的流对象,计算机中最小数据单元就是字节.InputStream OutputStream 字符流:字符编码问题,将字节流和编码表封装成对象就是字符流.Reader Writ ...
- 为什么选择C++
为什么选择C++,怎么不选其它语言呢? 为什么不选择C? 因为C++比C简单点~ 为什么不选择C#? 因为C++可以在所有操作系统上使用. 为什么不选择JAVA? 因为C++的性能好一点~ 还有其他的 ...
- androidApp的完全退出
思路:搜集整个工程所有的activity,通过循环把工程中所有的activity都关闭. 搜集工程中的activity,可以由单例模式实现, [java] view plaincopy import ...
- Java: How to resolve Access Restriction error
Issue: Access restriction: The constructor 'BASE64Decoder()' is not API (restriction on required lib ...
- 【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )
转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982 一. 日期选择器 (UIDatePicker) UIDatePic ...