# 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](http://www.xker.com/page/e2015/06/199141.html) ### 美文美圖 ?