用angular怎么缓存父页面数据
angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的。
但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置。再做的过程当中查过
许多资料,都说的不很详细,今天把方法记录下来,供参考。
要想缓存,要用到嵌套路由(ui-router):
有三个嵌套的方法:
- 使用“点标记法”,例如:
.state('contacts.list', {}) - 使用
parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts' - 使用
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怎么缓存父页面数据的更多相关文章
- js子页面获取父页面数据
做页面预览的时候,数据没有存入数据库,但是要打开一个页面进行预览,询问众大婶,原来是这样来做. 1.父页面 <input type="text" id="name& ...
- js中子父页面数据传递与方法调用
A父页面 ,B为子页面 1.父页面调用子页面 A中调用B中方法:self.frames[iframeName].BFunction(); 注:iframeName:为父页面中iframe的name属性 ...
- 页面嵌套 Iframe 产生缓存导致页面数据不刷新问题
最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息. 初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳.这样能 ...
- angular页面缓存与页面刷新
angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...
- Django | 页面数据的缓存与使用
为什么要使用缓存? 一个动态网站的基本权衡点就是,它是动态的. 每次用户请求页面,服务器会重新计算.从开销处理的角度来看,这比你读取一个现成的标准文件的代价要昂贵的多 使用缓存,将多用户访问时基本相同 ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- vue父页面给子页面传递数据
父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...
- jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题
http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...
- layui 或者layer 父页面获取子页面数据 或者子页面获取父页面操作方法
var frameId = $(layero).find("iframe").attr('id');//父页面获取子页面的iframe var id = $(window.fram ...
随机推荐
- 【原】FMDB源码阅读(三)
[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...
- Android学习路线总结,绝对干货
title: Android学习路线总结,绝对干货 tags: Android学习路线,Android学习资料,怎么学习android grammar_cjkRuby: true --- 一.前言 不 ...
- node模块加载层级优化
模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载.但是随着应用规模的加大,目录层级越来越深,若是在某个 ...
- CSS 3 学习——渐变
通过CSS渐变创建的是一个没有固定比例和固定尺寸的<image>类型,也就是说是一张图片,这张图片的尺寸由所应用的元素的相关信息决定.凡是支持图片类型的CSS属性都可以设置渐变,而支持颜色 ...
- asp.net mvc 验证码
效果图 验证码类 namespace QJW.VerifyCode { //用法: //public FileContentResult CreateValidate() //{ // Validat ...
- EC笔记:第4部分:21、必须返回对象时,别返回引用
使用应用可以大幅减少构造函数与析构函数的调用次数,但是引用不可以滥用. 如下: struct St { int a; }; St &func(){ St t; return t; } 在返回t ...
- AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的 ...
- Android local.properties 文件读取
转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6202369.html 本文出自[赵彦军的博客] 在Android Studio项目里面有个local.pro ...
- Android开发学习——画横线竖线
画横线/竖线 竖线 <View android:layout_width="1dp" android:layout_height="match_parent&quo ...
- chattr用法
[root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...