ui-router $轉換鉤子在瀏覽器刷新時沒有被調用

Question

我正在用ui-router 1.0.3在Angular 1.5.8中創建一個應用程序。 Ui路由器的掛鉤很棒，但是他們不能在瀏覽器重新加載。

這裏是註冊狀態我配置塊：

(function(app) { 
    'use strict'; 
    app.config(configFn); 

    configFn.$inject = ['$stateProvider']; 

    function configFn($stateProvider) { 
     $stateProvider 
      .state('login', { 
       url: '/login', 
       component: 'loginComponent' 
      }) 
      .state('selfcare', { 
       url: '/', 
       component: 'selfCareComponent', 
       abstract: true 
      }) 
      .state('selfcare.dashboard', { 
       url: 'dashboard', 
       component: 'dashboardComponent' 
      }) 
      .state('selfcare.appHome', { 
       url: 'appHome/:id', 
       component: 'appHomeComponent' 
      }) 
      .state('selfcare.serviceHome', { 
       url: 'serviceHome/:id', 
       component: 'serviceHomeComponent' 
      }) 
    } 

})(angular.module('selfcare')); 

而下面是對過渡註冊掛鉤運行塊：

(function(app) { 
    'use strict'; 
    app.run(runFn); 

    runFn.$inject = ['$rootScope', '$transitions' ,'$localStorage']; 

    function runFn($rootScope, $transitions, $localStorage) { 

     $transitions.onStart({to:'**'}, function(transtion){ 
      $rootScope.ngProgress.start(); 
     }) 

     $transitions.onSuccess({to:'**'}, function(transtion){ 
      $rootScope.ngProgress.complete(); 
     }) 

     $transitions.onBefore({to:'login'}, function(transtion){ 
      if($localStorage.isLoggedIn > Date.now()){ 
       return transtion.router.stateService.target('selfcare.dashboard'); 
      } 
     }) 

     $transitions.onBefore({to:'selfcare.**'}, function(transtion){ 
      if(!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()){ 
       $localStorage.$reset(); 
       return transtion.router.stateService.target('login'); 
      } 
     }) 
    } 

})(angular.module('selfcare')); 

我不能圖我在哪裏做錯了。一旦應用程序穩定並正常工作，鉤子會被調用，但在瀏覽器重新加載時，我可以打開任何URL並且不會調用任何鉤子。

任何幫助將不勝感激。謝謝

Answer 1

我以某種方式設法做所需的東西，但我不知道這是否是最好的方法。我想在運行塊中寫入轉換。

Transition對象是鉤子回調的參數提供了一個injector其可用於在應用程序的config塊以獲得運行時服務。

（我們也可以在config塊注入$injector）

(function(app) { 
    'use strict'; 
    app.config(configFn); 

    configFn.$inject = ['$transitionsProvider']; 

    function configFn($transitionsProvider) { 

     $transitionsProvider.onStart({ to: '**' }, function(transtion) { 
      transtion.injector().get('$rootScope').ngProgress.start(); 
     }) 

     $transitionsProvider.onSuccess({ to: '**' }, function(transtion) { 
      transtion.injector().get('$rootScope').ngProgress.complete(); 
     }) 

     $transitionsProvider.onBefore({ to: 'login' }, function(transtion) { 
      var $localStorage = transtion.injector().get('$localStorage'); 
      if ($localStorage.isLoggedIn > Date.now()) { 
       return transtion.router.stateService.target('selfcare.dashboard'); 
      } 
     }) 

     $transitionsProvider.onBefore({ to: 'selfcare.**' }, function(transtion) { 
      var $localStorage = transtion.injector().get('$localStorage'); 
      if (!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()) { 
       $localStorage.$reset(); 
       return transtion.router.stateService.target('login'); 
      } 
     }) 
    } 

})(angular.module('selfcare'));