用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 ...
随机推荐
- Linq之旅:Linq入门详解(Linq to Objects)
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- Redis数据库
Redis是k-v型数据库的典范,设计思想及数据结构实现都值得学习. 1.数据类型 value支持五种数据类型:1.字符串(strings)2.字符串列表(lists)3.字符串集合(sets)4.有 ...
- CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法
今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net Framework Data Provider 可能没有安装. 下面找到官方的文档说明: SQLi ...
- Hawk 5. 数据库系统
Hawk在设计之初,就是以弱schema风格定义的.没有严格的列名和列属性.用C#这样的静态强类型语言编写Hawk,其实并不方便.但弱schema让Hawk变得更灵活更强大. 因此,Hawk虽然之前支 ...
- 使用 Android Studio 检测内存泄漏与解决内存泄漏问题
本文在腾讯技术推文上 修改 发布. http://wetest.qq.com/lab/view/63.html?from=ads_test2_qqtips&sessionUserType=BF ...
- java时间
Calendar.getInstance().getTime() 获取当前时间(包括星期和时区 CST China Standard Time): Fri Jan 06 21:03:36 CST 2 ...
- Struts2入门(六)——国际化
一.前言 1.1.国际化简介 国际化是指应用程序在运行的时候,根据客户端请求来自的国家地区.语言的不同而显示不同的界面(简单说就是根据你的地区显示相关地区的语言,如果你现在在英国,那么显示的语言就是英 ...
- gulp 自动添加版本号
本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => " ...
- CentOS7下自定义目录安装mono+jexus教程
一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用自定义目录安装mono+jexus教程,使用默认目录请查看使用默认目录安装 ...
- CSharpGL(36)通用的非托管数组排序方法
CSharpGL(36)通用的非托管数组排序方法 如果OpenGL要渲染半透明物体,一个方法是根据顶点到窗口的距离排序,按照从远到近的顺序依次渲染.所以本篇介绍对 UnmanagedArray< ...