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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
React 高阶组件HOC用法归纳
Jun 13 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python函数装饰器用法实例详解
2015/06/04 Python
Python 中的 else详解
2016/04/23 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Python list和str互转的实现示例
2020/11/16 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
C语言开发工程师测试题
2016/12/20 面试题
2014年党员创先争优承诺书
2014/05/29 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript