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

    后记

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

  • 相关阅读:
    如何查找本地的ip
    jQuery解析AJAX返回的html数据时碰到的问题与解决
    angularjs之ng-bind和ng-model
    nodejs配置及cmd常用操作
    ID属性值为小数
    DOM对象
    js跨域问题
    加载图片失败,怎样替换为默认图片
    常用前端 网址
    echart字符云之添加点击事件
  • 原文地址:https://www.cnblogs.com/qiaduan/p/10250308.html
Copyright © 2020-2023  润新知