使用Angular緩存父頁面數(shù)據(jù)的方法
angular做單頁面應(yīng)用是一個比較好的框架，但是它有一定的入門難度，對于新手來說可能會碰到很多坑，也有許多難題，大部分仔細(xì)看文檔，找社區(qū)是能解決的。
但有些問題也許資料比較少，最近遇到過一個要緩存父頁面的問題，就是點(diǎn)擊進(jìn)入子頁后，再返回時父頁面的數(shù)據(jù)要緩存下來，包括滾動條的位置。再做的過程當(dāng)中查過
許多資料，都說的不很詳細(xì)，今天把方法記錄下來，供參考。
要想緩存，要用到嵌套路由（ui-router）：
有三個嵌套的方法：
- 使用“點(diǎn)標(biāo)記法”，例如：.state('contacts.list', {})
- 使用parent屬性，指定一個父狀態(tài)的名稱字符串，例如：parent: 'contacts'
- 使用parent屬性，指定一個父狀態(tài)對象，例如：parent: contacts（contacts 是一個狀態(tài)對象
嵌套路由如有不明白的，大家可以自己去google下。
1.在路由中配置好后，在父頁面中設(shè)置一個子view.
路由配置：
$stateProvider
.state('parent', {})
.state('parent.sub',{
url: '/flightStatus/:time',
views:{
'subView':{
templateUrl: 'sub.html',
controller: ''
}
}
}
);
2.配置好后，在父頁面添加view和名字（如果只有一個ui-view,名字可以不要）
parent.html
<ui-view name="subView"></ui-view> <!--其它html代碼--> ……
3.這時由父頁面進(jìn)去后，子頁面sub.html會加載到name為subView中
在子頁面中返回時，用angular的$window.history.back();
注意：這里返回時父頁面的controller將不在執(zhí)行
進(jìn)行以上配置后就可以緩存到父頁面的數(shù)據(jù)了，返回時不會刷新，在進(jìn)入子頁面時大家最好把父頁面隱藏（不隱藏是把內(nèi)容高度設(shè)為100%），返回時再顯示，這樣避免子父頁面都有輸入框下，按下tab時會把父頁面顯示的bug
以上所述是小編給大家介紹的使用Angular緩存父頁面數(shù)據(jù)的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了AngularJS過濾器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴(kuò)充對象)
今天小編就為大家分享一篇淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴(kuò)充對象)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色的核心代碼
這篇文章主要介紹了Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色的核心代碼,需要的朋友可以參考下2017-12-12
AngularJS操作鍵值對象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個對象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
本文主要介紹AngularJS 服務(wù)，這里整理了AngularJS 服務(wù)的基本知識資料，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達(dá)式(ui-set)的方法,通過具體問題的分析并結(jié)合實(shí)例形式給出了AngularJS長表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
這篇文章主要為大家詳細(xì)介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果的相關(guān)資料，angularjs modal模態(tài)框創(chuàng)建可拖動的指令，感興趣的小伙伴們可以參考一下2016-01-01
基于AngularJs select綁定數(shù)字類型的問題
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文，你將學(xué)會使用?resolver，?在?Angular?App?中應(yīng)用?resolver，應(yīng)用到一個公共的預(yù)加載導(dǎo)航，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Angular 中 select指令用法詳解的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09