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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
pm2启动ssr失败的解决方法
Jun 29 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实现的递归提成方案实例
2015/11/14 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
申论倡议书范文
2014/05/13 职场文书
个人四风对照检查材料
2014/09/26 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
教师工作证明范本
2015/06/12 职场文书
大学生支教感言
2015/08/01 职场文书
美容院管理规章制度
2015/08/05 职场文书
导游词之四川武侯祠
2019/10/21 职场文书