web-dev-qa-db-ja.com

AngularJS-UIルーターのstateChangeSuccessイベントが発生しない

私は UI Router をangularアプリで使用しています。state changeイベント。ただし、状態の変化では発生しません。それ以外はすべて正常に動作しており、コンソールにエラーはありません。同様の質問に出くわしましたが、解決策はありませんでした。

$ rootScope。$ on（ "$ routeChangeSuccess）または$ rootScope。$ on（" $ stateChangeSuccess）は、ui-router（AngularJS）を使用すると機能しません

angular + ui-router：$ stateChangeSuccessは状態bでトリガーされますが、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'    
        })
    });



}());

手がかりのないまま。何が欠けているのかわかりません。

angularjsangular-ui-routersingle-page-application
22
hemu

StateChangeイベントはui.router >= 1.0で廃止されました

新しいui.routerには次を使用します

StateChangeSuccess

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

StateChangeStart

$transitions.onStart({}, function(trans) {
 console.log("statechange start");
});

これを確認してください 移行ガイド 詳細については

31
Sibiraj

新しい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/272

14
Pratheek

$ stateイベントはangular version> 1.0.0で非推奨になりました。変更イベントでは今後使用する必要があります$ transitions

参照 $ transitions ここから

1
ojus kulkarni