AngularJS advanced (34) Angular Data is not updated in a timely manner

AngularJS advanced (34) Angular Data is not updated in a timely manner
Angular Data Update Is Not timely

When the control badge is changed correctly, it is found that the front-end code organization level has a serious problem. RootScope is used when data is transmitted and shared, causing global variable space pollution. According to AngularJs deep analysis and best practices, if the collaboration between the two controllers has a large amount of data sharing and interaction, you can use the "Singleton" feature of Factory and other services to inject a shared object to them for data transmission. When using rootScope, the variables are inconsistent. As shown in:

According to the application logic, the "my" Badge changes should be consistent with the "Search for help" Badge changes. Running shows that the badge "Search for medicines" has abnormal changes. By reading code and debugging, you can find problems with your business logic. The Business Code is as follows:

/** Update my logo */$ 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); // executed in 2 seconds

 

$ RootScope. mybadge is the corresponding badge variable. The value is from the global variable $ rootScope. medNoticeBadge_Sunny, which comes from the method body below:

 

/** Responded to the query for the little red dot */$ 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 ;}}

 

The above method body is called through the following statement:

 

/** Query the status of the first drug query (called only once) */$ 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 _ search status:" + data. errtext) ;};}}; $ rootScope. getmedNoticeBadge ();

 

During execution, the variable update is not timely. An error occurred while displaying the badge.

By reading the above Code, we found that all variables are passed through rootScope. For this reason, the method body that executes badge changes through latency. But this is not a good project organization level. You should encapsulate the method body that controls badge changes into a service, and use its Singleton feature to solve data inconsistency.

I tried to use the Factory Singleton feature to create a service, but the result was incorrect. The Code is as follows:

 

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 _ pharmaceutical status-query successful:" + JSON. stringify (data); return data. cnt;}, function (data) {console. log ("9015 _ search status:" + data. errtext); return 0;}) ;}return mybadgeFactory ;});

Meiwenmeitu