使用Angular缓存父页面数据的方法


Posted in Javascript onJanuary 03, 2017

angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的。

但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置。再做的过程当中查过

许多资料,都说的不很详细,今天把方法记录下来,供参考。

要想缓存,要用到嵌套路由(ui-router):

   有三个嵌套的方法:

  1. 使用“点标记法”,例如:.state('contacts.list', {})
  2. 使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
  3. 使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象

嵌套路由如有不明白的,大家可以自己去google下。

1.在路由中配置好后,在父页面中设置一个子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.这时由父页面进去后,子页面sub.html会加载到name为subView中

   在子页面中返回时,用angular的$window.history.back();

  注意:这里返回时父页面的controller将不在执行

进行以上配置后就可以缓存到父页面的数据了,返回时不会刷新,在进入子页面时大家最好把父页面隐藏(不隐藏是把内容高度设为100%),返回时再显示,这样避免子父页面都有输入框下,按下tab时会把父页面显示的bug

以上所述是小编给大家介绍的使用Angular缓存父页面数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持

Javascript 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
js中this对象用法分析
Jan 05 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 #Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 #Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 #Javascript
jQuery仿写百度百科的目录树
Jan 03 #Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 #Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 #Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 #Javascript
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
$()JS小技巧
2007/07/21 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
深入理解Node module模块
2018/03/26 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python实现图片筛选程序
2018/10/24 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
童装店创业计划书
2014/01/09 职场文书
法律六进活动方案
2014/03/13 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
生日宴会策划方案
2014/06/03 职场文书
不错的求职信范文
2014/07/20 职场文书
学校师德师风整改措施
2014/10/27 职场文书
工会积极分子个人总结
2015/03/03 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript