使用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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
详解Node.js如何处理ES6模块
May 15 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JQuery 操作/获取table具体代码
2013/06/13 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Python实现按中文排序的方法示例
2018/04/25 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
用python实现学生管理系统
2020/07/24 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
酒店总经理岗位职责
2014/03/17 职场文书
家长通知书教师评语
2014/04/17 职场文书
企业宣传策划方案
2014/05/29 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
华清池导游词
2015/02/02 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
投资入股协议书
2016/03/22 职场文书