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 aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
nginx部署多个vue项目的方法示例
Sep 06 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
jQuery实现frame之间互通的方法
2017/06/26 jQuery
JS二分查找算法详解
2017/11/01 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python操作日期和时间的方法
2014/03/11 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python递归函数定义与用法示例
2017/06/02 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python列表list操作相关知识小结
2020/01/29 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
机械电子工程专业自荐书
2014/06/10 职场文书
股份合作协议书
2014/09/10 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
详解Python中的for循环
2022/04/30 Python