Question

我无法访问在控制器中以ui-router状态解析的密钥

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

这有效，但我也想在视图中访问已解析的数据我不知道如何访问控制器中的已解析密钥（将其分配给范围属性）或直接在视图中（这应该是在$ 1.5.0中引入的$ scope。$ resolve）。我尝试使用密钥，@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函数中，我看到已解析的密钥＆＃39; validateResponse＆＃39;与参数中的值。

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

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

（为简洁起见，此处仅显示相关部分）

...但是调试器甚至都没有使用console.log。在视图中，我在$ scope中没有validateResponse属性...没有$ console.log（）或Batarang范围视图

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

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

Answer 1

所以现在我又得到了另一个错误...... 我在控制器中注入validateResponse对象，它只在子状态下实例化（＆＃39; login.resetPassword＆＃39;）。没关系，但是父状态不知道这个对象，因为它在该状态下没有解析（＆＃39;登录＆＃39;）。因此这个错误：

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

猜猜我需要单独的控制器。

Answer 2

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

.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'
        }
    }
})

Answer 3

好的，最后似乎已经解决了......我必须将控制器包含在子状态的resolve块中，以便更新。同时在控制器中注入已解析的密钥：

DISPLAY

应该成为

.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：如何在控制器中的UI-Router中访问已解析的值

3 个答案: