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>
时间: 2024-08-10 08:29:02

angular的路由跳转,的监听$rootScope.$on的相关文章

[安卓] 1、页面跳转+按钮监听

共2个layout:main.xml和other.xml;2个activity:MainActivity.java,OtherActivity.java 在mainactivity中重写onCreate,第6行设置按钮监听~ 1 public void onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 Log.v("MainA

angular 路由跳转以及传参

1. 路由跳转方式一: /路由?id='001' 方式 -- queryParams 方式 路由配置:{ path: 'details', component: bookDetailsComponent }    a.  指令跳转: <a [routerLink]="['/details']" [queryParams]="{id: item.id}" style="color:blue; font-size: 12px;cursor:pointer

RN性能优化及事件监听

自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让其媲美原生App的速度,但是现实感觉有点不尽人意.接下来介绍下实践中遇到的一些性能问题以及优化方案. 一.StackNavigator页面切换动画优化 场景:在navigation还没出来时,导航路由使用NavigatorIOS来实现,页面切换是很流畅的,但是用了StackNavigator navigation发现页面切换会使JS线程出现严重的掉帧(卡顿现象): 原因:NavigatorIOS的切换动画是跑在UI主线程上

angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复

angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误. 那么在我们遇到异常时,首先要做的是什么? 第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正. 第二步:调试代码,观察调用过程中参数传递是否正常. 第三步:百度一下. 对于我这个观点,可能会有人不服气,出现异常不应该第一时间问度娘吗?对于较熟悉angular 路由的人来说,这确实是一个快速的解决问题之道,但不是我们学习的根本.我们学习要知根知底. 对于angular的子路由,我们来看一个例子 i

vue路由跳转时判断用户是否登录功能

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

linux 开启oracle监听

secureCRT连接到数据库所在的linux机器,切换到oracle用户模式下 [[email protected] ~]# su - oracle 步骤阅读 2 然后用sqlplus登录到数据库,关闭数据库 [[email protected] bin]$ sqlplus /nolog  //登录sqlplus SQL> connect /as sysdba  //连接oracle SQL> startup //起动数据库 SQL> exit  //退出sqlplus ,起动监听 步

Android截屏事件监听

转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/53737655 1. 前言 Android系统没有直接对截屏事件监听的接口,也没有广播,只能自己动手来丰衣足食,一般有三种方法. 利用FileObserver监听某个目录中资源变化情况 利用ContentObserver监听全部资源的变化 监听截屏快捷按键 由于厂商自定义Android系统的多样性,再加上快捷键的不同以及第三方应用,监听截屏快捷键这事基本不靠谱,可以直接忽略. 本文使用

《Head First Servlets & JSP》-5-属性和监听

Servlet初始化参数 在DD文件(web.xml)中 Servlet参数在 在Servlet代码中 在Servlet初始化之前不能使用Servlet初始化参数 一旦有了一个ServletConfig引用,就可以调用getInitParameter()方法,不过 不能从构造函数调用这个方法!因为容器只调用构造函数还未调用init()之前,它还不算一个完整的Servlet(薛定谔Servlet). Servlet初始化参数只能赌一次--就是在容器初始化Servlet的时候 容器建立一个Servl

Android开机和关机广播监听

Android开机.关机广播监听 一.开机广播的监听 1.在AndroidManifest.xml文件注册接收开机广播 <receiver android:name=".XXXBroadcastReceiver" > <intent-filter> <!-- 开机广播 --> <action android:name="android.intent.action.BOOT_COMPLETED" /> </inte