使用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常用正则表达式总结
Nov 12 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 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静态类
2006/11/25 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python PyTorch预训练示例
2018/02/11 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
25道Java面试题集合
2013/05/21 面试题
英文简历自荐信范文
2013/12/11 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
欧元符号 €
2022/02/17 杂记