使用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 相关文章推荐
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
js实现模糊匹配功能
Feb 15 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
JavaScript Canvas实现验证码
2020/08/02 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
神经网络python源码分享
2017/12/15 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
自我评价怎么写正确呢?
2013/12/02 职场文书
2014全年工作总结
2014/11/27 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
python状态机transitions库详解
2021/06/02 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
MySQL如何解决幻读问题
2021/08/07 MySQL
公历12个月名称的由来
2022/04/12 杂记