Angular JS - UI Router Zdarzenie stateChangeSuccess nie wyzwala

Question

Używam UI Router w mojej aplikacji kątowej. Próbuję zintegrować zdarzenia state change, ale one nie uruchamiają zmiany stanu. Wszystko inne działa dobrze i nie ma błędów w konsoli. Natknąłem się po podobnych pytań, ale żaden z roztworem pracował dla mnie:

$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

Poniżej mój kod kątowa:

(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'  
     }) 
    }); 



}()); 

lewo bez pojęcia. Nie jestem pewien, czego mi brakuje.

Answer 1

Jeśli korzystasz z nowego routera Ui (v1.0.0), zdarzenia $stateChange* nie będą działać. Od tej chwili musisz używać haczyków $transitions.on*.

Możesz przeczytać tutaj.

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

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

Answer 2

wydarzenia stateChange została zaniechana na ui.router >= 1.0

nowego ui.router użyć następującego

StateChageSuccess

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

StateChangeStart

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

Sprawdź to migration guide więcej informacji

Answer 3

$ stan zdarzenia są przestarzałe dla wersji kątowej> 1.0.0. teraz naprzód do zmiany przypadku musimy użyć $ przejścia

odnoszą $transitions stąd

Answer 4

Zrobiłem migrację ręcznie w mojej aplikacji, jak to było dość proste. Ja tylko dodać następujące w bloku przebiegu aplikacji:

$transitions.onSuccess({}, function(transition) { 
    console.log('$transitions.onSuccess: ', arguments); 
    var toState = transition.$to(); 
    var toParams = transition.params(); 
    var fromState = transition.$from(); 
    var fromParams = transition.params('from'); 
    var options = transition._options; 
    console.log('new args: ', toState, toParams, fromState, fromParams, options); 
    $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams, options); 
}); 

$transitions.onStart({}, function(transition) { 
    console.log('$transitions.onStart: ', arguments); 
    var toState = transition.$to(); 
    var toParams = transition.params(); 
    var fromState = transition.$from(); 
    var fromParams = transition.params('from'); 
    var options = transition._options; 
    console.log('new args: ', toState, toParams, fromState, fromParams, options); 
    if ($rootScope.$broadcast('$stateChangeStart', toState, toParams, fromState, fromParams, options).defaultPrevented) { 
     transition.abort(); 
    } 
}); 

EDIT: Dodałam też przypadki, dla $ stateChangeError:

$transitions.onError({}, function(transition) { 
    var toState = transition.$to(); 
    var toParams = transition.params(); 
    var fromState = transition.$from(); 
    var fromParams = transition.params('from'); 
    var options = transition._options; 
    $rootScope.$broadcast('$stateChangeError', toState, toParams, fromState, fromParams, options); 
}); 

$state.onInvalid(function(to, from, injector) { 
    var toState = { 
     name: to._identifier, 
    }; 
    var toParams = to._params; 
    var fromState = from._definition; 
    var fromParams = from._params; 
    var options = from._options; 
    $rootScope.$broadcast('$stateChangeError', to, toParams, fromState, fromParams, options); 
});