AngularJS中重新加载当前路由页面的方法


Posted in Javascript onMarch 09, 2018

这个问题同样困扰我很久,网上的回答五花八门,全都不能解决;终于在网上找很久,看到某大神的解决办法,整理作此分享;使用ui-router重新加载当前页面的问题。(ui-router版本需要是0.2.14以上的)

用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应;

假设我们的路由页面 app.toMenu ;

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:true}">
<!-- 网上普遍都说这样刷新,但这个是整个页面也同时都刷新了 -->

其实,reload除了可以传递布尔类型型参数,还可以传string和object型参数,如果只是想刷新当前的路由页面,而不去连带刷新父路由,我们可以把reload的参数值设置为当前路由页面标识。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="app.toMenu" ui-sref-opts="{reload:'app.toMenu'}">
<!-- 这个方法刷新当前路由页面 -->

另外也可以用$state.reload();

$state.reload()是加载整个页面;

$state.reload('app.toMenu');加载当前页面;

<a href="" ng-click=" rel="external nofollow" reloadCurPage()">
<!-- controller里面 $scope -->
$scope.reloadCurPage = function(){
 $state.reload('app.toMenu');
}

注:如果标识是变量的话

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref="{{k.value}}" ui-sref-opts="{reload:'{{k.value}}'}">

以上这篇AngularJS中重新加载当前路由页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
jquery 使用点滴函数代码
May 20 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
JS array数组检测方式解析
May 19 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 #Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 #Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 #Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 #Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
You might like
PHP测试程序运行时间的类
2012/02/05 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
js 对象是否存在判断
2009/07/15 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js字符串转成JSON
2013/11/07 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python生成验证码实例
2014/08/21 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python Requests 基础入门
2016/04/07 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
python实现月食效果实例代码
2019/06/18 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
利用python实现逐步回归
2020/02/24 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
函授药学自我鉴定
2014/02/07 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
社区健康教育工作方案
2014/06/03 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS