使用Angular缓存父页面数据的方法  更新时间:2017年01月03日 10:55:09   作者:秋风8   这篇文章主要介绍了使用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 …… 3.这时由父页面进去后,子页面sub.html会加载到name为subView中    在子页面中返回时,用angular的$window.history.back();   注意:这里返回时父页面的controller将不在执行 进行以上配置后就可以缓存到父页面的数据了,返回时不会刷新,在进入子页面时大家最好把父页面隐藏(不隐藏是把内容高度设为100%),返回时再显示,这样避免子父页面都有输入框下,按下tab时会把父页面显示的bug 以上所述是小编给大家介绍的使用Angular缓存父页面数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持 您可能感兴趣的文章: AngularJS中的缓存使用 详解Angular中$cacheFactory缓存的使用 AngularJS在IE下取数据总是缓存问题的解决方法 详解AngularJS中$http缓存以及处理多个$http请求的方法 AngularJS实现Model缓存的方式 Angularjs在360兼容模式下取数据缓存问题的解决办法 angular 缓存 页面 相关文章 详解AngularJS中自定义过滤器 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等 2015-12-12 AngularJS入门教程一:路由用法初探 这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下 2017-05-05 使用angular写一个hello world 这篇文章主要介绍了使用angular写一个hello world的方法及示例,需要的朋友可以参考下 2015-01-01 Angular模板表单校验方法详解 这篇文章主要为大家详细介绍了Angular模板表单校验方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-08-08 Angular4实现动态添加删除表单输入框功能 这篇文章主要介绍了Angular4实现动态添加删除表单输入框功能,需要的朋友可以参考下 2017-08-08 AngularJS 执行流程详细介绍 本文详细介绍了从页面开始加载到页面渲染完毕过程中,AngularJS执行了哪些操作,有需要的小伙伴可以参考下 2016-08-08 angular写一个列表的选择全选交互组件的示例 本篇文章主要介绍了angular写一个列表的选择全选交互组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 浅谈angular.copy() 深拷贝 本篇文章主要介绍了浅谈angular.copy() 深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 详解在Angularjs中ui-sref和$state.go如何传递参数 这篇文章主要介绍了详解在Angularjs中ui-sref和$state.go如何传递参数,详细的介绍了ui-sref和$state.go的区别和如何传参,有兴趣的可以了解下 2017-04-04 AngularJS自定义指令详解(有分页插件代码) 本篇文章主要介绍了AngularJS自定义指令详解(有分页插件代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 最新评论

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缓存父页面数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持

您可能感兴趣的文章:

  • AngularJS中的缓存使用
  • 详解Angular中$cacheFactory缓存的使用
  • AngularJS在IE下取数据总是缓存问题的解决方法
  • 详解AngularJS中$http缓存以及处理多个$http请求的方法
  • AngularJS实现Model缓存的方式
  • Angularjs在360兼容模式下取数据缓存问题的解决办法
张贴在3