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 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
javascript常用的正则表达式实例
May 15 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python中的urllib模块使用详解
2015/07/07 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python 阶乘累加和的实例
2019/02/01 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
构建高效的python requests长连接池详解
2020/05/02 Python
keras中的History对象用法
2020/06/19 Python
数控技术与应用毕业生自荐信
2013/09/24 职场文书
活动总结模板
2014/05/09 职场文书
安全横幅标语
2014/06/09 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年司法所工作总结
2015/04/27 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis