ui-router - $ state.go() non funziona

Question

Ecco le app.js del mio progetto:

(function() { 
'use strict'; 

angular 
    .module('app', ['ui.router', 'ngCookies', 'angular-inview', 'ngMaterial']) 
    .config(config) 
    .run(run); 

config.$inject = ['$stateProvider', '$urlRouterProvider', '$mdThemingProvider']; 
function config($stateProvider, $urlRouterProvider, $mdThemingProvider) { 
     $mdThemingProvider.theme('default') 
      .primaryPalette('deep-orange') 
      .accentPalette('teal', { 
       'default': 'A400' 
      }); 

     $urlRouterProvider.otherwise('/app'); 

     $stateProvider 
      .state('app', { 
       url: '/app', 
       data: { 
        clearenceLevel: 1 
        }, 
        views: { 
        '': { 
         templateUrl: 'app/views/navbar.html', 
        } 
       } 
      }) 
      .state('home.works', { 
       url: '/works', 
       templateUrl: 'app/views/works.html', 
       controller: 'WorksController as vm' 
      }) 
      .state('login', { 
       url: '/login', 
       templateUrl: 'app/views/login.html', 
       controller: 'LoginController as vm', 
       data: { 
        clearenceLevel: 0 
        } 
      }) 
      .state('register', { 
       url: '/register', 
       templateUrl: 'app/views/register.html', 
       controller: 'RegisterController as vm', 
       data: { 
        clearenceLevel: 0 
        } 
      }); 
} 
run.$inject = ['$rootScope', '$location', '$state', '$cookieStore', '$http', 'AuthenticationService']; 
function run($rootScope, $location, $state, $cookieStore, $http, AuthenticationService) { 
    $rootScope.globals = $cookieStore.get('globals') || {}; 

    if ($rootScope.globals.currentUser) { 
     $http.defaults.headers.common['aimm-token'] = $rootScope.globals.currentUser.token; 
     $http.defaults.headers.common['aimm-id'] = $rootScope.globals.currentUser.id; 
    } 

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     var clearenceLevel = toState.data.clearenceLevel; 
     var loggedIn = $rootScope.globals.currentUser; 

     if (clearenceLevel > 0 && !loggedIn) { 
      alert("redirecting"); 
      return $state.go('login'); 
     } 
    }); 
} 
})(); 

io non posso avere $ state.go() che lavorano. Il $on('$stateChangeStart'...); funziona correttamente e viene visualizzato l'avviso quando si tenta di raggiungere uno stato protetto senza sessione. Ma il return $state.go('login'); non funziona. Reindirizza a /app.

Grazie per il vostro aiuto.

Answer 1

Bene, grazie a @ Vanojx1, ho scoperto di aggiungere e.preventDefault(); prima che lo $state.go('login'); funzionasse. Ancora non capisco perché però.

Answer 2

È necessario eseguire lo $state.go sull'ambito principale e non su un servizio (angolare) o ambito virtuale creato temporaneamente.

È inoltre possibile risolvere il problema avvolgendolo in $timeout o setTimeout che lo registrerà nel ciclo del browser per essere eseguito dopo l'esecuzione del metodo corrente ecc. Anche con 0 millisecondi lo farà, come.

$timeout(()=>{$state.go('xyz')},0) 

o

setTimeout(()=>{$state.go('xyz')},0);