溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

AngularJs如何實現(xiàn)返回前一頁面時刷新一次前面頁面

發(fā)布時間:2021-08-13 09:28:24 來源:億速云 閱讀:137 作者:小新 欄目:web開發(fā)

小編給大家分享一下AngularJs如何實現(xiàn)返回前一頁面時刷新一次前面頁面,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

要求:

頁面A進入到頁面B,在頁面B處理完后返回頁面A,頁面A里的數(shù)據(jù)應(yīng)該動態(tài)的減去一條,但由于一般情況下頁面是緩存起來的,返回A后讀取的是緩存靜態(tài)頁面,里面顯示的數(shù)據(jù)不會減少。應(yīng)客戶要求,需要重新加載一次數(shù)據(jù),達到頁面A可以刷新數(shù)據(jù)目的。

研究過程:

從網(wǎng)上尋找發(fā)現(xiàn),有一個方法可以獲取到當(dāng)前頁面的URL:$location

以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 這個路徑為例:

1. 獲取當(dāng)前完整的url路徑:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

2. 獲取當(dāng)前url路徑(當(dāng)前url#后面的內(nèi)容,包括參數(shù)和哈希值):

$location.url();
// /foo?name=bunny#myhash

3. 獲取當(dāng)前url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)):

$location.path()
// /foo

4. 獲取當(dāng)前url的協(xié)議(比如http,https)$location.protocol()

$location.protocol()
// http

5. 獲取當(dāng)前url的主機名

$location.host()
// localhost

6. 獲取當(dāng)前url的端口

$location.port()
// 80 (這里就是wamp的默認端口號)

獲取到當(dāng)前頁的URL后,把它賦給全局變量,當(dāng)URL變化時,刷新前一頁面即可

parent.location.reload(); //該方法可用于刷新前面所以頁面

之后繼續(xù)在網(wǎng)上找有沒有更好的辦法,發(fā)現(xiàn)了一個可以直接使用的方法:

這兩個事件分別發(fā)生在當(dāng)url開始發(fā)生改變,以及url改變完成.他們都被綁定在$rootScope里面:

$rootScope.$on('$locationChangeStart',function(){
  console.log('開始改變$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
  console.log('結(jié)束改變$location')
});

之后寫進代碼里做了驗證,驗證結(jié)果可用。寫法為:

$rootScope.$on('$locationChangeSuccess',function(){//返回前頁時,刷新前頁
 parent.location.reload(); 
});

以上是“AngularJs如何實現(xiàn)返回前一頁面時刷新一次前面頁面”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI