Angular(angular-ui-router) - 访问$ locationChangeSuccess拦截器内的$ stateParams

时间:2016-10-05 12:13:28

标签: angularjs angular-ui-router state

我使用角度UI-Router设置了我的路线,如下所示:

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

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

我希望在拦截器中访问params中的permissions元素,如下所示:

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

        ...

    })
}

如下图所示,访问参数的逻辑方法不起作用。

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

Several other console.logs

我的尝试结果:

(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

1 个答案:

答案 0 :(得分:0)

遇到了类似的问题。

我的猜测是在这种情况下应该避免 $ locationChangeSuccess 事件(基于Difference between $locationChangeStart, $routeChangeStart, and $stateChangeStart)而应该使用 $ stateChangeSuccess

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