Angular (angular-ui-router) - Access $stateParams inside $locationChangeSuccess interceptor

Question

I've set up my route using angular UI-Router like this:

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

export default function routes($stateProvider) {
    $stateProvider
    .state('the/route', {
        url: '/the/route',
        params: {
            'permissions': 'TESTPERMISSION'
        },
        views: {
            ...
        }
    })
}

and I want to access the permissions element in params in an interceptor that looks like this:

export default function locationChangeAuthInterceptor($rootScope, $state, $stateParams) {
    $rootScope.$on('$locationChangeSuccess', (evt) => {

        ...

    })
}

As you can see in the images below the logical methods of accessing the parameters doesn't work.

If I console $state.params or $stateParams I get this

Several other console.logs

Results of my attempts:

(1) $state StateService {router: UIRouter, invalidCallbacks: Array[0]}
(2) $state.params StateParams {}
    #: null
    permissions: "TESTPERMISSION"__proto__: Object
(3) $stateParams StateParams {}
    #: null
    permissions: "TESTPERMISSION"
    __proto__: Object
(4) $state.params.permissions =>  undefined
(5) $stateParams.permissions =>  undefined
(6) $state.params["permissions"] =>  undefined
(7) $stateParams["permissions"] =>  undefined
(8) angular.isObject($state.params) =>  true
(9) angular.isObject($stateParams) =>  true
(10) $state.params.stateParams =>  undefined
(11) $stateParams.stateParams =>  undefined
(12) $stateParams.permissions =>  undefined
(13) $stateParams[0] =>  undefined
(14) $stateParams[1] =>  undefined
(15) $state.params[0] =>  undefined
(16) $state.params[1] =>  undefined
(17) […$stateParams] => []length: 0__proto__: Array[0]
(18) […$stateParams] => []length: 0__proto__: Array[0]
(19) Object.keys($stateParams) => []
(20) Object.keys($state.params) => []length: 0__proto__: Array[0]
(21) $stateParams.StateService => undefined
(22) $state.params.StateService => undefined
(23) $stateParams["StateService"] => undefined
(24) $state.get("permissions") => null

Hi Eric, could you include relevant error messages as **plain text**? Please — J. Chomel, Oct 05 '16 at 12:15

score 0 · Answer 1 · edited May 23 '17 at 12:13

Got a similar problem.

My guess is that the $locationChangeSuccess event should be avoided in this scenario (based on Difference between $locationChangeStart, $routeChangeStart, and $stateChangeStart) and $stateChangeSuccess should be used instead.

    $rootScope.$on('$stateChangeSuccess', function() {
        if ($state.$current.self.scroll == 'bottom')
            ;
        else                    
            $anchorScroll();
    });

Angular (angular-ui-router) - Access $stateParams inside $locationChangeSuccess interceptor

1 Answers1