Statechangestart prevents navigation

$rootScope.$on('$stateChangeStart', function(event, toState  , toParams
                                                   , fromState, fromParams) {
     if(fromState.name=='home' && toState.name == 'search'){
         event.preventDefault();
     }
});

      

I am trying to prevent state transition from state.

event.preventDefault() 

      

doesn't do it. I want the state to remain current.

+3


source to share


1 answer


What you need should work out of the box. I have created a plunker showing your requirement in action. These three states of the sample

$stateProvider
    .state('home', {
        url: '/home',
        template: '<div>home</div>',
      })
    .state('search', {
        url: '/search',
        template: '<div>search</div>',
      })
    .state('index', {
        url: '/index',
        template: '<div>index</div>',
      })

      

And this (the same as in the question) condition DISABLES navigation from HOME to SEARCH:



$rootScope.$on('$stateChangeStart',
   function(event, toState  , toParams
                   , fromState, fromParams) 
    {
      var isFromHome = fromState.name =='home' ;
      var isToSearch = toState.name == 'search';
      if(isFromHome && isToSearch)
      {
        event.preventDefault();
      }
    });

      

Check here

+3


source







All Articles