AngularJS進階(二十八)解決AngualrJS頁面刷新導致異常顯示問題

解決AngualrJS頁面刷新導致異常顯示問題

緒

俗話說，細節決定成敗，編程亦是如此。編程過程中我們可能會不自覺的忽視一些細節問題，殊不知，這些細節正是導致頁面顯示出現問題的地方。今略舉一例，與君共勉之。

頁面正常加載後，顯示如下：

按F5刷新之後，頁面如下所示:

很明顯，頁面顯示出現了異常。回過頭再看看Chrome的錯誤提示，

具體代碼如下:

正是以上代碼導致了錯誤的發生。

追根溯源

讓我們回顧一下，錯誤到底是如何發生的。正常加載情況下，頁面正常顯示很容易理解，程序是按照既定的數據流走的。但是按F5刷新之後，$stateParams.uid已經不存在了，此時再次調用就會出現undefined的錯誤，導致頁面加載出現異常。

如何解決這類問題呢？

首先應在語句執行之前添加變量判斷語句，若變量存在且不為空，則可繼續執行其它流程。代碼如下:<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICAgICAgJHNjb3BlLnBhZ2VOdW1iZXIgICA9IDE7IC8vIMbwyryy6dGv0rPC6zwvcD4KPHA+ICAgICAgJHNjb3BlLnRvdGFsSXRlbXMgICA9IDA7IC8vILLp0a/K/b7d19zK/TwvcD4KPHA+ICAgICAgJHNjb3BlLnBhZ2VDbnQgPSAxOyAvLyCz9cq8u6/X3NKzyv08L3A+CjxwPjwvcD4KPHA+ICAgICAgaWYoJHN0YXRlUGFyYW1zLnVpZCAhPSA="" && $stateParams.uid != null && typeof(instance.shopStatementDtl) != "undefined")

{

.................

.................

}

執行後效果:

美文美圖