angular的路由跳转,的监听$rootScope.$on
使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由。每一个状态都对应着一个页面,
因此对路由状态改变的监听也变的十分重要。
可以使用:$rootScope.$on(…….)监听
$stateChangeStart: 表示状态切换开始
$stateNoFound:没有发现
$stateChangeSuccess:切换成功
$stateChangeError:切换失败
回调函数的参数解释:
event:当前事件的信息
toState:目的路由状态
toParams:传到目的路由的参数
fromState:起始路由状态
经典例子:
我的项目中有两个模块,allIdea,myIdea,这两个模块都有一个编辑,因为这两个模块编辑功能完全一样,因此将其写为公共模块editCtrl…….
点击:allIdea的编辑,以及myIdea的编辑都会进入编辑模块
现在的问题是:在编辑模块刷新页面的时候,会丢失掉tab的状态信息(tab不会高亮,或者出现混淆的状况)
解决方案(不唯一)
使用$$rootScope.$on('$stateChangeStart....)监听状态的改变
eidtCtrl中(编辑模块的控制器中):
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
//tab的状态的改变
localStorage['from_idea']=fromState.name;//获得上一级路由,存储在localStorage中
});
localStorage['from_idea']=="home.ideas.myIdeas"?$rootScope.eval = 'myIdeas':$rootScope.eval='allIdeas';
//home.ideas.myIdea是myIdea页面对应的状态,如果localStorage['from_idea']等于home.ideas.myIdeas,则myIdeas高亮,否则allIdeas高亮
html:页面
<div class="ideas-list">
<div class="my-row">
<div class="amdin-nav" >
<ul class="list-inline adminAction-listHeader">
<li ui-sref="home.ideas.allIdeas" class="hand">
<div ng-class="{active:eval=='allIdeas'}" class="my-btn-lg" ng-show="can_see_all_idea">全部创意</div>
</li>
<li ui-sref="home.ideas.myIdeas" class="hand" >
<div class="my-btn-lg" ng-class="{active:eval=='myIdeas'}" >我的创意</div>
</li>
<li ui-sref="home.ideas.appr_list" class="hand" >
<div class="my-btn-lg" ng-class="{active:eval=='waitList'}">待审批</div>
</li>
<li ui-sref="home.ideas.approval" class="hand" >
<div class="my-btn-lg" ng-class="{active:eval=='hasApproval'}" >已审批</div>
</li>
</ul>
</div>
<div class=" list-content" ui-view="part" > </div>
</div>
</div>
angular的路由跳转,的监听$rootScope.$on的更多相关文章
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- Angular和Ionic的路由跳转
一.Angular和Ionic的路由跳转 Angular的路由跳转: constructor(private router:Router){ } .... this.router.navigat ...
- next路由跳转监听
next的路由跳转监听事件 { “routeChangeStart”, "beforeHisroryChange" "routeChangeComplete", ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- vue --》路由query 编程式导航传值与监听
1.首先在一个页面设置一个按钮,用于路由跳转 <template> <div> <button @click="handleToRouter"> ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- JS高级学习笔记(9) 之 转:前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
随机推荐
- TLS就是SSL的升级版+网络安全——一图看懂HTTPS建立过程——本质上就是引入第三方监管,web服务器需要先生成公钥和私钥,去CA申请,https通信时候浏览器会去CA校验CA证书的有效性
起初是因为HTTP在传输数据时使用的是明文(虽然说POST提交的数据时放在报体里看不到的,但是还是可以通过抓包工具窃取到)是不安全的,为了解决这一隐患网景公司推出了SSL安全套接字协议层,SSL是基于 ...
- [转载]java获取word文档的条目化内容
在开发Web办公系统或文档系统时,PageOffice组件是众所周知的在线处理微软word/ppt/excel文档的强大工具,它对WORD文档的各种处理在API层面进行了封装,屏蔽了Office VB ...
- 011——数组(十一)array_merge array_merge_recursive array_change_key_case
<?php /** */ //array_merge() 将多个数组合并,生成新数组.当键名相同时,后者覆盖前者 /*$array1=array('weburl'=>"bbs.b ...
- expdp/impdp 详细参数解释
任意可以使用expdp/impdp的环境,都可以通过help=y看到帮助文档. 1.expdp参数说明 2.impdp参数说明 3.expdp参数说明(中文) 4.impdp参数说明(中文) expd ...
- 转载-lvs官方文档-Linux服务器集群系统(二)
Linux服务器集群系统(二) LVS集群的体系结构 章文嵩 (wensong@linux-vs.org) 2002 年 4 月 本文主要介绍了LVS集群的体系结构.先给出LVS集群的通用体系结构,并 ...
- 在Linux下设置定时任务(每分钟执行一次特定的shell脚本)
在当前用户下,开始编辑定时任务 crontab -e 按键 i 进入编辑模式 输入下述命令 */ * * * * sh /***/*****.sh 然后按键 Esc 退出编辑模式,再输入 wq 保存退 ...
- Linux系统在启动过程中mbr主引导程序被破坏的解决方案
首先,mbr主引导程序被破坏是指系统在启动过程中,磁头找不到/boot分区(windows的启动分区在c盘). 1)下面我们模拟主引导分区被破坏的情况:(在启动分区划分446M的存储大小) 2)重启( ...
- linux:系统启动流程
系统启动流程 本文基于CentOS6 版本 黑色部分为主流程分支,蓝色部分为详细流程分支,绿色部分是注释部分 第一步--加载BIOS打开计算机电源,计算机会首先加载BIOS信息,主要负责检测系统外围关 ...
- 起thread时,运行报错terminate called without an active exception
I am getting a C++ error with threading: terminate called without an active exception Aborted How to ...
- Springboot项目搭配ELK日志平台
上一篇讲过了elasticsearch和kibana的可视化组合查询,这一篇就来看看大名鼎鼎的ELK日志平台是如何搞定的. elasticsearch负责数据的存储和检索,kibana提供图形界面便于 ...