AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法
要求:
頁(yè)面A進(jìn)入到頁(yè)面B,在頁(yè)面B處理完后返回頁(yè)面A,頁(yè)面A里的數(shù)據(jù)應(yīng)該動(dòng)態(tài)的減去一條,但由于一般情況下頁(yè)面是緩存起來(lái)的,返回A后讀取的是緩存靜態(tài)頁(yè)面,里面顯示的數(shù)據(jù)不會(huì)減少。應(yīng)客戶要求,需要重新加載一次數(shù)據(jù),達(dá)到頁(yè)面A可以刷新數(shù)據(jù)目的。
研究過(guò)程:
從網(wǎng)上尋找發(fā)現(xiàn),有一個(gè)方法可以獲取到當(dāng)前頁(yè)面的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)前頁(yè)的URL后,把它賦給全局變量,當(dāng)URL變化時(shí),刷新前一頁(yè)面即可
parent.location.reload(); //該方法可用于刷新前面所以頁(yè)面
之后繼續(xù)在網(wǎng)上找有沒(méi)有更好的辦法,發(fā)現(xiàn)了一個(gè)可以直接使用的方法:
這兩個(gè)事件分別發(fā)生在當(dāng)url開(kāi)始發(fā)生改變,以及url改變完成.他們都被綁定在$rootScope里面:
$rootScope.$on('$locationChangeStart',function(){
console.log('開(kāi)始改變$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
console.log('結(jié)束改變$location')
});
之后寫(xiě)進(jìn)代碼里做了驗(yàn)證,驗(yàn)證結(jié)果可用。寫(xiě)法為:
$rootScope.$on('$locationChangeSuccess',function(){//返回前頁(yè)時(shí),刷新前頁(yè)
parent.location.reload();
});
以上這篇AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
基于Angularjs實(shí)現(xiàn)分頁(yè)功能
這篇文章主要介紹了基于Angularjs實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp,實(shí)現(xiàn)跨域,下面來(lái)實(shí)現(xiàn)搜索框的下拉列表功能,本文思路明確,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02
angularJS模態(tài)框$modal實(shí)例代碼
本篇文章主要介紹了angularJS模態(tài)框$modal實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 是一個(gè) JavaScript 框架。它是一個(gè)以 JavaScript 編寫(xiě)的庫(kù)。這篇文章主要介紹了Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié),需要的朋友可以參考下2018-09-09
AngularJS中的指令實(shí)踐開(kāi)發(fā)指南(二)
這篇文章主要介紹了AngularJS中的指令實(shí)踐指南(二)的相關(guān)資料,需要的朋友可以參考下2016-03-03
AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下2016-12-12

