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 事件属性绑定带参数的函数
Mar 13 Javascript
extjs fckeditor集成代码
May 10 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
TypeScript之调用栈的实现
Dec 31 Javascript
OpenLayers3实现地图显示功能
Sep 25 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 引用是个坏习惯
2010/03/12 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
简单三步,搞掂内存泄漏
2007/03/10 Javascript
Javascript typeof 用法
2008/12/28 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
pycharm 使用心得(四)显示行号
2014/06/05 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
浅谈python3中input输入的使用
2019/08/02 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
卖车协议书
2014/04/21 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL