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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
javascript断点调试心得分享
Apr 23 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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继承的一个应用
2011/09/06 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
webstorm添加*.vue文件支持
2018/05/08 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
Python算术运算符实例详解
2017/05/31 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python for循环中的陷阱详解
2018/07/13 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
自我评价个人范文
2013/12/16 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书