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