AngularJs返回前一頁面時(shí)刷新一次前面頁面的方法
要求：
頁面A進(jìn)入到頁面B，在頁面B處理完后返回頁面A，頁面A里的數(shù)據(jù)應(yīng)該動(dòng)態(tài)的減去一條，但由于一般情況下頁面是緩存起來的，返回A后讀取的是緩存靜態(tài)頁面，里面顯示的數(shù)據(jù)不會(huì)減少。應(yīng)客戶要求，需要重新加載一次數(shù)據(jù)，達(dá)到頁面A可以刷新數(shù)據(jù)目的。
研究過程：
從網(wǎng)上尋找發(fā)現(xiàn)，有一個(gè)方法可以獲取到當(dāng)前頁面的URL：$location
以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 這個(gè)路徑為例:
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的主機(jī)名
$location.host() // localhost
6. 獲取當(dāng)前url的端口
$location.port() // 80 (這里就是wamp的默認(rèn)端口號(hào))
獲取到當(dāng)前頁的URL后，把它賦給全局變量，當(dāng)URL變化時(shí)，刷新前一頁面即可
parent.location.reload(); //該方法可用于刷新前面所以頁面
之后繼續(xù)在網(wǎng)上找有沒有更好的辦法，發(fā)現(xiàn)了一個(gè)可以直接使用的方法：
這兩個(gè)事件分別發(fā)生在當(dāng)url開始發(fā)生改變,以及url改變完成.他們都被綁定在$rootScope里面：
$rootScope.$on('$locationChangeStart',function(){
console.log('開始改變$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
console.log('結(jié)束改變$location')
});
之后寫進(jìn)代碼里做了驗(yàn)證，驗(yàn)證結(jié)果可用。寫法為：
$rootScope.$on('$locationChangeSuccess',function(){//返回前頁時(shí)，刷新前頁
parent.location.reload();
});
以上這篇AngularJs返回前一頁面時(shí)刷新一次前面頁面的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法
這篇文章主要介紹了創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法,AngularJS是一個(gè)非常具有人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因?yàn)閿?shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，本文就介紹一下Angular resolve基礎(chǔ)用法，感興趣的小伙伴們可以參考一下2018-10-10
angularjs中使用ng-bind-html和ng-include的實(shí)例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Angular 4 依賴注入學(xué)習(xí)教程之FactoryProvider的使用（四）
這篇文章主要給大家介紹了關(guān)于Angular 4 依賴注入之FactoryProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
本文對(duì)angularjs的filter過濾器進(jìn)行系統(tǒng)介紹，附上實(shí)例解析，便于理解。具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
使用AngularJS處理單選框和復(fù)選框的簡(jiǎn)單方法
這篇文章主要介紹了使用AngularJS處理單選框和復(fù)選框的方法,在AngularJS表單的基礎(chǔ)之上編寫起來非常簡(jiǎn)單,需要的朋友可以參考下2015-06-06
AngularJs unit-testing（單元測(cè)試）詳解
本文主要介紹AngularJs unit-testing（單元測(cè)試）的內(nèi)容，這里整理了單元測(cè)試的知識(shí)，及示例代碼，有興趣的朋友可以參考下2016-09-09
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。2015-05-05
這篇文章主要介紹了AngularJS 表達(dá)式，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下2016-09-09
通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01