AngularJS - UI路由器stateChangeSuccess事件未触发

时间:2016-05-11 13:14:19

标签: angularjs angular-ui-router single-page-application

我在我的角应用中使用UI Router。我正在尝试整合state change事件,但他们没有解决状态变化问题。其他一切工作正常,控制台没有错误。我遇到了类似的问题,但没有一个解决方案对我有用:

$rootScope.$on("$routeChangeSuccess) or $rootScope.$on("$stateChangeSuccess) does not work when using ui-router(AngularJS)

angular + ui-router: $stateChangeSuccess triggered on state b but not on a.b

以下是我的Angular代码:

(function() {

    angular.module("bootdemo", [
        "ngResource",       
        "ui.router",
        "bootdemo.core",
        "bootdemo.index"        
    ])
    .run(function ($rootScope, $location, $state, $stateParams) {

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
            alert("root change success");
        })

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){ 
            alert("root change start");
        })

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
            alert("root change error");
        })
    })
    .config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('index', {
                url: "/",
                templateUrl: '/index/templates/welcome.html',
                controller: 'IndexController as vm' 
            })
            .state('login', {
                url: "/login",
                templateUrl: '/index/templates/login.html',
                controller: 'LoginController as ctrl'   
            })
            .state('home', {
                url: "/home",
                templateUrl: '/index/templates/home.html',
                controller: 'HomeController as ctrl'    
        })
    });



}());

没有任何线索。我不确定我错过了什么。

3 个答案:

答案 0 :(得分:30)

{I}}

已弃用StateChange事件

ui.router >= 1.0使用以下

StateChangeSuccess

ui.router

StateChangeStart

$transitions.onSuccess({}, function() {
  console.log("statechange success");
});

检查此migration guide以获取更多信息

答案 1 :(得分:14)

如果您使用的是新的ui-router(v1.0.0),$stateChange*事件将无效。从现在开始,您必须使用$transitions.on*个钩子。

你可以在这里阅读。

https://ui-router.github.io/docs/latest/modules/ng1_state_events.html

https://github.com/angular-ui/ui-router/issues/2720

答案 2 :(得分:1)

对于角度版本>,不推荐使用

$ state 事件。 1.0.0。 现在转发事件我们必须使用 $ transitions

从这里引用$transitions