使用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的更多相关文章

  1. angular中路由跳转并传值四种方式

    一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...

  2. Angular和Ionic的路由跳转

    一.Angular和Ionic的路由跳转 Angular的路由跳转: constructor(private router:Router){    } .... this.router.navigat ...

  3. next路由跳转监听

    next的路由跳转监听事件 { “routeChangeStart”, "beforeHisroryChange" "routeChangeComplete", ...

  4. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

  5. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  6. vue --》路由query 编程式导航传值与监听

    1.首先在一个页面设置一个按钮,用于路由跳转 <template> <div> <button @click="handleToRouter"> ...

  7. Angular:路由的配置、传参以及跳转

    ①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...

  8. vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  9. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

随机推荐

  1. Gruntjs提高生产力(四)

    思考: 1.grunt以工程为单位安装插件? 如果有新工程就要重新安装插件或者把安装好的插件拷贝过去.这样很麻烦,解决方案是需要用grunt的项目统一放在grunt项目中. 2.每次需要针对项目编写g ...

  2. SSH集成log4j日志环境

    第一步:在web.xml初始化log4j <context-param> <param-name>contextConfigLocation</param-name> ...

  3. poj 3411 Paid Roads很水的DFS

    题意:给你N 城市和M条道路,每条道路要付的钱,但是如果你在这个道路上你可以付其他道路的钱(跟走到的时候去的话不一样),问你从1走到N最少话费是多少. 直接DFS搜. 链接http://poj.org ...

  4. 从centos6升级到centos7步骤

    1. 备份 2. 安装依赖列表 yum源文件/etc/yum.repos.d/upgrade.repo,内容为 [upgrade] name=upgrade baseurl=http://dev.ce ...

  5. CF 913 A

    题解: 首先判断n是否大于30 大于30输出m 否则输出m%2^n 代码: #include<bits/stdc++.h> using namespace std; int n,m; in ...

  6. keepererrorcode = connectionloss for 错误处理

    自己的环境在虚拟机上,于是使用同事的环境调试问题,发现无法初始化成功,提示keepererrorcode = connectionloss for,于是上网查了下资料整理如下: 1.对比代码中引用的j ...

  7. PostgreSQL提升为主库 时间线加一的问题

    在使用PostgreSQL高可用集群过程中发现一个很难解决的问题,先记录在这里. 我们知道在PG流复制集群中,如果主库死掉了,备库要提升为主库有两种方法: 1)pg_ctl promote 2)创建对 ...

  8. phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接

    phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接--解决方法     phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和 ...

  9. React之组件

    鉴于个人的开发习惯,我将react默认的文件结构作了如下修改: 我们的项目是写在src目录下的. 那么,接下来,继续看react的组件式如何编写的吧. 一.react的组件 不同于vue的每个组件都是 ...

  10. [置顶] AI大行其道,你准备好了吗?—谨送给徘徊于转行AI的程序员

    前言 近年来,随着 Google 的 AlphaGo 打败韩国围棋棋手李世乭之后,机器学习尤其是深度学习的热潮席卷了整个IT界.所有的互联网公司,尤其是 Google 微软,百度,腾讯等巨头,无不在布 ...