UI-Router - What is the exact issue for the getting the error as `Maximum call stack size exceeded'

Question

My app have the login page, which require to redirect to another extenal web site. as well I require to use the same login page with another new state name.

i have made the required changes, But I am getting the error as

Maximum call stack size exceeded - which I am not able to understand at all. how to overcome with this?

here is my code :

state provider stuff : both are same login controller and html

$stateProvider
      .state('login', {
        url: '/',
        templateUrl: 'app/login/login.html',
        controller: 'loginCtrl as ctrl',
        data: {
          requireLogin: false
        }
      })
      .state('fallback', {
        url: '/fallback',
        templateUrl: 'app/login/login.html',
        controller: 'loginCtrl as ctrl',
        data: {
          requireLogin: false
        }
      })

issue :

function stateController($rootScope,  $state,  fsErr ){
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams ) {


      if( toState.name === 'login' ){

        window.location = 'https://cway.cisco.com/fs/';
        event.preventDefault();

      }

      if( toState.name === 'fallback' ){

        console.log('nothing doing') //consoles 1227 times
        $state.go("fallback");
        event.preventDefault();

        return false;

      }
})

Amir Suhail · Answer 1 · 2016-11-22T07:16:13.807

0

Maximum call stack size exceeded

This is similar to an infinite loop. The $state.go("fallback"); is getting called infintly and hence causing the error.

Here is the problem: The $stateChangeStart will trigger whenever there is $state changes. So here when the $state is changing to fallback, IF true, then again call $state.go("fallback"); which will trigger stateChangeStart again, and starts looping.

Solution:

You can simply delete the else if block:

if( toState.name === 'fallback' && !loop) {
    console.log('nothing doing');
    $state.go("fallback");
    event.preventDefault();
    return false;
} //delete this if statement

Set a flag and break the loop.

var loop; // to be defined in parent function outside the $rootScope.$on.

if( toState.name === 'fallback' && !loop) {
    loop = true
    console.log('nothing doing')
    $state.go("fallback");
    event.preventDefault();
    return false;
}

edited Nov 22 '16 at 07:16

answered Nov 22 '16 at 06:25

Amir Suhail

1,284
3
12
31

I understand this logic, But still I am getting the same issue – user2024080 Nov 22 '16 at 06:42
After deleting the second if block completely also? – Amir Suhail Nov 22 '16 at 07:16
Or if you are tring to use flag to exit the loop, then declare the varible before $rootScope.$on function. – Amir Suhail Nov 22 '16 at 07:19

UI-Router - What is the exact issue for the getting the error as `Maximum call stack size exceeded'

1 Answers1