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 ...
随机推荐
- 【if...else】身高预测
每个做父母的都关心自己孩子成人后的身高,据有关生理卫生知识与数理统计分析表明,影响小孩成人后的身高的因素包括遗传.饮食习惯与体育锻炼等.小孩成人后的身高与其父母的身高和自身的性别密切相关.设faHei ...
- RobotFramework自动化测试框架-使用Python编写自定义的RobotFramework Lib
使用Python构建Lib工程 可以用来开发Python Lib的IDE工具有很多,常见的有Pycharm,Eclipse with PyDev插件等,而且在RobotFramework官网中也已经提 ...
- springMVC源码--Controller控制器
springMVC给我们提供Controller控制器,用来实现我们的逻辑处理,在Controller接口中定义的方法也是比较简单的,如下: Controller接口及实现类:
- Mybatis源码分析--关联表查询及延迟加载原理(二)
在上一篇博客Mybatis源码分析--关联表查询及延迟加载(一)中我们简单介绍了Mybatis的延迟加载的编程,接下来我们通过分析源码来分析一下Mybatis延迟加载的实现原理. 其实简单来说Myba ...
- 快速排序quick_sort(python的两种实现方式)
排序算法有很多,目前最好的是quick_sort:unstable,spatial complexity is nlogN. 快速排序原理 python实现 严蔚敏的 datastruct书中有伪代码 ...
- MT8127:如何让system分区可读写(MTK安卓6.0)
Android 系统默认情况下,system 分区是只读 mount 的,因为无法进行往里写数据的,可 以用 adb 命令 adb remount 重新 mount 一下. 也可以通过在板子上,输入以 ...
- 给定一数组,输出满足2a=b(a,b代表数组中的数)的数对,要求时间复杂度尽量低。
//时间复杂度O(n),空间复杂度O(n) void findSequence(int* arr, int len) { int* hashtable = new int[RANGE]; memset ...
- Excel init
Sub Test() Dim r As Range Dim a As Integer a = For Each r In Range("b1:b6") If r.Font.Bold ...
- Redis 学习笔记3:Jedis 连接虚拟机下的Redis 服务
Jedis 是 Redis 官方首选的 Java 客户端开发包. 虚拟机的IP地址是192.168.8.88. Jedis代码是放在windows上的,启动虚拟机上的Redis服务之后,用Jedis连 ...
- ssh用法及命令
http://blog.csdn.net/pipisorry/article/details/52269785 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本 ...