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>