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 ...
随机推荐
- MongoDB 数据库引用
MongoDB 引用有两种: 手动引用(Manual References) DBRefs DBRefs vs 手动引用 考虑这样的一个场景,我们在不同的集合中 (address_home, addr ...
- [精简版]snowing snow
CSS <style> body { background: #eee; } @keyframes mysnow { 0% { bottom: 100%; opacity: 0; } 50 ...
- Spring Boot 中应用Spring data mongdb
摘要 本文主要简单介绍下如何在Spring Boot 项目中使用Spring data mongdb.没有深入探究,仅供入门参考. 文末有代码链接 准备 安装mongodb 需要连接mongodb,所 ...
- FFmpeg在Linux下安装编译过程
转载请把头部出处链接和尾部二维码一起转载,本文出自:http://blog.csdn.net/hejjunlin/article/details/52402759 今天介绍下FFmpeg在Linux下 ...
- React Native之ListView实现九宫格效果
概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展 ...
- FFmpeg的H.264解码器源代码简单分析:宏块解码(Decode)部分-帧间宏块(Inter)
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
- Python 键盘鼠标监听
异想天开的想记录一下自己每天的键盘键位走向,于是就在网上搜索了一下相关的实现,然后就发现了一个第三方的库pyHook.封装的很好,我们只需要傻瓜式的调用里面的API就可以了. 下面是我在使用pyHoo ...
- Android必知必会-Stetho调试工具
一.背景 Stetho是 Facebook 出品的一个强大的 Android 调试工具,使用该工具你可以在 Chrome Developer Tools查看APP的布局, 网络请求(仅限使用Volle ...
- Xcode中不用Storyboard,用纯xib创建TabBar模式视图
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果要开发Tab类型视图的App,在Xcode中可以使用对应的 ...
- 使用maven将项目打成jar包
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...