zoukankan      html  css  js  c++  java
  • 解决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:得到上一个路由的参数

    后记

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

  • 相关阅读:
    阻止表单重复提交的办法以及支付成功后页面后退重复提交的解决方案
    jsp页面的共用
    空间谱专题02:波束形成(Beamforming)
    空间谱专题01:信号模型
    空间谱专题00:综述
    BP神经网络
    fdatool的滤波器设计
    Testbench
    Cordic算法简介
    快速删除注释
  • 原文地址:https://www.cnblogs.com/qiaduan/p/10250308.html
Copyright © 2011-2022 走看看