Angular:如何在控制器中访问 UI-Router 中的解析值

Angular: How to access resolved values in UI-Router in controller

我无法访问控制器中 ui-路由器状态解析的密钥

当前处于子状态,在显示模板之前发出 http 请求以检查用户是否已通过身份验证。如果不是,则在 onEnter 部分重定向到另一个状态。

可行,但我还想在显示的视图中访问已解析的数据 我不知道如何在控制器中访问已解析的键(将其分配给范围 属性)或直接在视图中访问(这应该与 [=37= 中引入的 $scope.$resolve 一起使用) ] 1.5.0)。 我尝试用密钥注入控制器,@resolve 属性 等。到目前为止,我在谷歌搜索这个问题时得到的所有工作示例对我都不起作用。

这是状态:

.state('login.resetPassword',{
    url: '/resetPassword/{validateToken}'
    ,resolve: {
        validateResponse: function($stateParams,AuthService,SessionService){
                            return AuthService.validatePasswordResetToken($stateParams.validateToken)
                            .then(function(validateResponse){
                                SessionService.set('validateToken',$stateParams.validateToken);
                                return validateResponse.data; //{validate_ok:true/false,message:I18nKey}
                            })
        }
    }
    ,onEnter: function($stateParams,$state,validateResponse){
        if(validateResponse.validate_ok){
            // do nothing, go to resetPassword
        }
        else{
            $state.go('message',{message:validateResponse.message});
        }
    }
    ,views: {
        'forgotPassword': {
            templateUrl: '/app/components/login/views/resetPassword.html'
        }
    }
})

在开发人员工具中,我看到 validateResponse 解析正常,在 onEnter 函数中,我看到解析的键 'validateResponse' 和参数中的值。

在控制器中我尝试访问已解析的 属性:

['validateResponse',function(validateResponse){
console.log('validateResponse: ',validateResponse)
...
}]

(为简洁起见,此处仅显示相关部分)

...但调试器甚至从未到达 console.log 行。 在视图中,我在 $scope 中没有 validateResponse 属性 ... $console.log() 或 Batarang scope view

父状态包含对控制器的引用,但即使我将控制器移动到子状态也没有区别:

这里有什么问题?????

尝试在以下状态下引用您的控制器:

.state('login.resetPassword',{
    url: '/resetPassword/{validateToken}'
    ,resolve: {
        validateResponse: function($stateParams,AuthService,SessionService){
                            return AuthService.validatePasswordResetToken($stateParams.validateToken)
                            .then(function(validateResponse){
                                SessionService.set('validateToken',$stateParams.validateToken);
                                return validateResponse.data; //{validate_ok:true/false,message:I18nKey}
                            })
        }
    }
    ,onEnter: function($stateParams,$state,validateResponse){
        if(validateResponse.validate_ok){
            // do nothing, go to resetPassword
        }
        else{
            $state.go('message',{message:validateResponse.message});
        }
    }
    ,controller: ['validateResponse',function(validateResponse){
        console.log('validateResponse: ',validateResponse);            
    }]
    ,views: {
        'forgotPassword': {
            templateUrl: '/app/components/login/views/resetPassword.html'
        }
    }
})

好的,似乎终于解决了...我必须将控制器包含在子状态的解析块中,以便它得到更新。同时在控制器中注入已解析的密钥:

.state('login.resetPassword',{
    url: '/resetPassword/{validateToken}'
    ,resolve: {
        validateResponse: function($stateParams,AuthService,SessionService){
                            return AuthService.validatePasswordResetToken($stateParams.validateToken)
                            .then(function(validateResponse){
                                SessionService.set('validateToken',$stateParams.validateToken);
                                return validateResponse.data;                             })
        }
    }
    ,onEnter: function($stateParams,$state,validateResponse){
        if(validateResponse.validate_ok){
            // do nothing, go to resetPassword
        }
        else{
            $state.go('message',{message:validateResponse.message});
        }
    }
    ,views: {
        'forgotPassword': {
            templateUrl: '/app/components/login/views/resetPassword.html'
        }
    }
})

应该变成

.state('login.resetPassword',{
    url: '/resetPassword/{validateToken}'
    ,resolve: {
        validateResponse: function($stateParams,AuthService,SessionService){
                            return AuthService.validatePasswordResetToken($stateParams.validateToken)
                            .then(function(validateResponse){
                                SessionService.set('validateToken',$stateParams.validateToken);
                                return validateResponse.data;                             })
        }
    }
    ,onEnter: function($stateParams,$state,validateResponse){
        if(validateResponse.validate_ok){
            // do nothing, go to resetPassword
        }
        else{
            $state.go('message',{message:validateResponse.message});
        }
    }
    ,views: {
        'forgotPassword': {
            templateUrl: '/app/components/login/views/resetPassword'
            ,controller:'AuthController'

        }
    }
})

和控制器:

angular.module('myApp')
.controller('AuthController',
    ['$scope','validateResponse',
function($scope,validateResponse){

        console.log('validateResponse = ',validateResponse);
...

所以现在我又遇到了一个错误... 我在控制器中注入 validateResponse 对象,它仅在子状态 ('login.resetPassword') 中实例化。没关系,但父状态不知道此对象,因为它不在该状态下进行解析 ('login')。因此这个错误:

angular.js:13236 Error: [$injector:unpr] Unknown provider: validateResponseProvider <- validateResponse <- AuthController

猜猜我在这里需要单独的控制器。