使用Angular缓存父页面数据的方法

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

赞 (0)

相关推荐

  • AngularJS在IE下取数据总是缓存问题的解决方法

    本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法.分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJS的配置中通过$httpProvider来设置其不缓存.具体如下所示: ngApp.config(function ($httpProvider) { // Initialize get if no

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • AngularJS实现Model缓存的方式

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope的某个变量. 有的直接把对象赋值给Scope变量:有的在Provider中返回一个对象再赋值给Scope变量:有的在Provider中返回一个构造函数再赋值给Scope变量.本篇来一一体验. 首先自定义一个directive,用来点击按钮改变一个scope变量值. angular .module('

  • AngularJS中的缓存使用

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory与缓存对象 $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量.举个生动

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • Angularjs在360兼容模式下取数据缓存问题的解决办法

    测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重装之后,终于打开了开发者工具,经过跟踪发现,第一次删除数据时可以正常刷新,第二次或以后的删除将无法刷新,跟踪代码,发现通过异步请求的数据正常的返回并且绑定了.点击搜索按钮,也无法实现刷新,但是点击分页,发现可以翻页.初步推断是浏览器缓存了异步请求数据,跟踪比较返回的数据发现,推断是正确的.于是从网上

  • 使用Angular缓存父页面数据的方法

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置.再做的过程当中查过 许多资料,都说的不很详细,今天把方法记录下来,供参考. 要想缓存,要用到嵌套路由(ui-router):    有三个嵌套的方法: 使用"点标记法",例如:.state('contacts

  • layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin

  • JavaScript实现提交模式窗口后刷新父窗口数据的方法

    本文实例讲述了JavaScript实现提交模式窗口后刷新父窗口数据的方法.分享给大家供大家参考,具体如下: 有些时间,按需求设计,一个窗口中,点击按扭,弹出模式窗口,在模式窗口中,添加完数据后(提交),关闭模式窗口,并且刷新父窗口,而恰恰模式窗口并不支持window.opener,所以无法获得父窗口,也就是说无法在关闭模式窗口后,来得到父窗口,但是可以借助showModealDialog的返回值来判断是否刷新,当调用showModealDialog时,父窗口代码会停在这一行,当弹出的模式窗口关闭

  • vue中,在本地缓存中读写数据的方法

    1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good-storage' const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, comp

  • javascript刷新父页面的各种方法汇总

    用iframe.弹出子页面刷新父页面iframe <script language=JavaScript> parent.location.reload(); </script> 弹出子页面 <script language=JavaScript> window.opener.location.reload(); </script> 子窗口刷新父窗口 <script language=JavaScript> self.opener.locatio

  • js子页面获取父页面数据示例

    做页面预览的时候,数据没有存入数据库,但是要打开一个页面进行预览,询问众大婶,原来是这样来做. 1.父页面 复制代码 代码如下: <input type="text" id="name" value="zhangsan"/> <a href="a.html" target="_blank">预览</a> 2.子页面,也就是a.html获取父页面中文本框的value 复制代

  • redis缓存数据库中数据的方法

    redis缓存数据库中数据的方法

    本文实例为大家分享了redis缓存数据库中数据的具体代码,供大家参考,具体内容如下 将数据库的数据保存到redis缓存 当第一次查询时,缓存没有对应的数据,则会查询数据库,并将数据更新到缓存当缓存中有对应的数据时,则会直接访问缓存,则不查询数据库这样在性能优化上有很大的帮助 ProvinceServiceImpl public class ProvinceServiceImpl implements ProvinceService {     private ProvinceDao dao =

  • iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: 复制代码 代码如下: $("#objid", document.iframes('iframe').document) 或 复制代码 代码如下: $(document.getElementById('iframeId').contentWindow.document.body).html() $(docum

  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    最近,在项目中使用到了layer.layer的弹层组件可以说是非常好用,layer 至今仍作为 layui 的代表作.在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互. 其实,官方文档都说的很清楚了. layui官方文档:http://layer.layui.com/ 使用版本:2.3.0 只是,需要我们耐心的读懂文档内容,然后根据自己的业务情况,实现自己想要的效果. 一.子页面获取父页面数据 子

  • js中iframe调用父页面的方法

    本文实例讲述了js中iframe调用父页面的方法.分享给大家供大家参考.具体实现方法如下: 子页面调用父页面的方法在js中很容易实现.我们只需要在主页面加个函数,然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 但是我在chrome浏览器下却发现此方法无效了 复制代码 代码如下: //在父页面中调用该函数 <script> function dey() { var cards_frame=d

随机推荐