解决ui-router路由监听$stateChangeStart、$stat…

2019-01-10 07:48:07来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

问题解答

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:得到上一个路由的参数

 

后记

如有不对的地方,还望大家指正,共同进步

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:AngularJS之jeDate日期控件基本使用

下一篇:document对象execCommand的command参数介绍