使用Angular緩存父頁(yè)面數(shù)據(jù)的方法
angular做單頁(yè)面應(yīng)用是一個(gè)比較好的框架，但是它有一定的入門(mén)難度，對(duì)于新手來(lái)說(shuō)可能會(huì)碰到很多坑，也有許多難題，大部分仔細(xì)看文檔，找社區(qū)是能解決的。
但有些問(wèn)題也許資料比較少，最近遇到過(guò)一個(gè)要緩存父頁(yè)面的問(wèn)題，就是點(diǎn)擊進(jìn)入子頁(yè)后，再返回時(shí)父頁(yè)面的數(shù)據(jù)要緩存下來(lái)，包括滾動(dòng)條的位置。再做的過(guò)程當(dāng)中查過(guò)
許多資料，都說(shuō)的不很詳細(xì)，今天把方法記錄下來(lái)，供參考。
要想緩存，要用到嵌套路由（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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持
相關(guān)文章
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細(xì)的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下2017-04-04
這篇文章主要給大家介紹了關(guān)于protractor安裝與基本使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求，發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡(jiǎn)單方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-10-10
AngularJS中的Directive自定義一個(gè)表格
本篇文章給大家介紹在angularjs中自定義一個(gè)有關(guān)表格的directive，涉及到angularjs directive相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例
下面小編就為大家?guī)?lái)一篇angularJS利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
下面小編就為大家?guī)?lái)一篇Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本篇文章給大家詳細(xì)分析了angularjs中$http異步上傳Excel文件方法，對(duì)此有需要的讀者可以學(xué)習(xí)下。2018-02-02
AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分，但是這也是其比較好玩的地方。這篇文章我們就來(lái)說(shuō)一說(shuō)如何在我們自定義的指令中，利用ngModel的controller來(lái)做雙向數(shù)據(jù)綁定，本文對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。2016-10-10
AngularJS入門(mén)教程之迭代器過(guò)濾詳解
本文主要介紹AngularJS 迭代器過(guò)濾,這里提供了詳細(xì)的知識(shí)資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08