使用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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
原生JS轮播图插件
Feb 09 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
js 异步处理进度条
2010/04/01 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
法律专业自我鉴定
2013/10/03 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
办理收楼委托书范本
2014/10/09 职场文书
语文教师个人工作总结
2015/02/06 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL