解決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：得到上一個路由的參數

 

后記

如有不對的地方，還望大家指正，共同進步