使用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截取字符串常用方法整理及使用示例
Oct 18 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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为php增加openssl模块的方法
2011/06/14 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
js获取微信版本号的方法
2015/05/12 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
基于python socketserver框架全面解析
2017/09/21 Python
python中 logging的使用详解
2017/10/25 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
django配置app中的静态文件步骤
2020/03/27 Python
python中append函数用法讲解
2020/12/11 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
迟到检讨书5000字
2014/01/31 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书