解決ui-router路由監聽$stateChangeStart、$stateChangeSuccess、$stateChangeError不執行的問題

問題解答

angular1項目導入ui-router以後，使用路由監聽，代碼以下

　angular.module('app', ['ui.router', 'ui.router.state.events'])

angular.module("app")
    .run(['$rootScope', function ($rootScope) {

  　　　// 監聽路由開始時觸發
  　　  $rootScope.$on('$stateChangeStart', function () {}

　　　  // 監聽路由成功時觸發
  　　  $rootScope.$on('$stateChangeSuccess', function () {}

　　　  // 監聽路由出現錯誤時觸發
  　　  $rootScope.$on('$stateChangeStart', function () {}
　 }) 
}])

當切換路由的時候，本來應該會監聽到路由的變化，可是實際卻沒有走這個路由監聽器，這是爲何呢？答案以下：

這時須要在index.html導入一個stateEvents.js庫文件，解決路由監聽不到的問題(PS:必須在angular.module主模塊下注入'ui.router.state.events')

附上ui-router官方教程地址：https://ui-router.github.io/ng1/

附上stateEvents.js官方教程地址：https://ui-router.github.io/ng1/docs/latest/modules/ng1_state_events.html#_statechangeerror

 

參數解讀

根據stateEvents.js官方教程地址，路由監聽提供的參數部分翻譯

event：           該事件的基本信息

toState:           獲得當前路由的信息，好比路由名稱，url,視圖的控制器，模板路徑等

toParams:       獲得當前路由的參數

fromState：    獲得上一個路由的信息，好比路由名稱，url,視圖的控制器，模板路徑等

fromParams：獲得上一個路由的參數

 

後記

若有不對的地方，還望你們指正，共同進步