AngularJs返回前一页面时刷新一次前面页面的方法


Posted in Javascript onOctober 09, 2018

要求:

页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少。应客户要求,需要重新加载一次数据,达到页面A可以刷新数据目的。

研究过程:

从网上寻找发现,有一个方法可以获取到当前页面的URL:$location

以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例:

1. 获取当前完整的url路径:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):

$location.url();
// /foo?name=bunny#myhash

3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数):

$location.path()
// /foo

4. 获取当前url的协议(比如http,https)$location.protocol()

$location.protocol()
// http

5. 获取当前url的主机名

$location.host()
// localhost

6. 获取当前url的端口

$location.port()
// 80 (这里就是wamp的默认端口号)

获取到当前页的URL后,把它赋给全局变量,当URL变化时,刷新前一页面即可

parent.location.reload(); //该方法可用于刷新前面所以页面

之后继续在网上找有没有更好的办法,发现了一个可以直接使用的方法:

这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:

$rootScope.$on('$locationChangeStart',function(){
  console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
  console.log('结束改变$location')
});

之后写进代码里做了验证,验证结果可用。写法为:

$rootScope.$on('$locationChangeSuccess',function(){//返回前页时,刷新前页
 parent.location.reload(); 
});

以上这篇AngularJs返回前一页面时刷新一次前面页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的delete使用详解
Apr 11 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
JavaScript实现简单拖拽效果
Sep 15 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
Angular4 Select选择改变事件的方法
Oct 09 #Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 #Javascript
You might like
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
大学军训自我鉴定
2013/12/15 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
教师节大会主持词
2015/07/06 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫