angular的路由跳转，的监听$rootScope.$on

标签：改变   开始   storage   outer   inline   ges   完全   审批   sap   

使用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

标签：改变   开始   storage   outer   inline   ges   完全   审批   sap   

原文地址：http://www.cnblogs.com/evaling/p/6699066.html