Angular ui-router 没有将解析注入控制器

Question

我刚刚开始使用 Angular 和 Express，并面临着困难时期。 我来自 Java 背景，想学习 Angular 和 Express，因此尝试构建一个小型应用程序。

我想做什么： 我已经给用户一个密码重置链接，以便更改他的密码。 链接是这样的：

本地主机：9000/重置/：令牌

现在，我创建了一个简单的视图，它显示了一个输入框，如果令牌有效则更改他的密码，否则如果基于 ng-show angular 属性的令牌无效则打印错误。

问题：在渲染上面创建的视图之前，我希望 ui-router 检查 :token 是否有效。 我将在我的控制器中使用令牌的有效性信息来控制上面提到的 ng-show 属性。

阅读本文后，我尝试利用 $stateProvider.state 功能进行解析，以便将令牌验证的响应作为先决条件。 这将有助于我在渲染实际视图时使用 ng-show 技术显示错误消息或输入框以根据 ui-router 解析 promiseObject 更改密码。

现在的问题是什么？

好吧，在打破我的头太久之后，我决定在这里发布我的问题。 任何人都可以在这里帮助我吗？

我的问题：

1.我能够从 api 调用中获取数据/错误，但不知何故 ui-router 没有将它注入我的控制器中。 谁能告诉我我在这里做错了什么？

2.现在，如果令牌无效，我将从后端 api 返回 404 作为响应。 但是前端的工厂方法将其视为错误（这是在 Node.js 中预期的吗？）并且抛出错误导致 deferred.reject()。 现在，如果我使用 ui-router 定义，如果 promise 没有得到解决，那么视图将不会被呈现，对吧？ 有什么方法可以将这个错误也传递给我的控制器吗？ 我要求传递 err 的原因是，我视图的 ng-show 逻辑基于响应代码 (4xx/2xx)，具体取决于我将显示错误消息或输入框。

代码片段：

调用其余 api 的工厂方法：

  isPasswordResetTokenValid: function(token, callback) {
    var cb = callback || angular.noop;
    var deferred = $q.defer();

    return User.getUserByPasswordResetToken(token,
      function(data) {
        deferred.resolve(data);
        return cb(data);
      },
      function(err) {
        deferred.reject(err);
        return cb(err);
      }.bind(this)).$promise;
  } 


'use strict';

angular.module('scrubApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('passwordreset', {
        url: '/reset/:token',
        templateUrl: 'app/account/passwordreset/passwordreset.html',
        resolve: { 

          promiseObj2: function($stateParams, Auth){
              var token = $stateParams.token;
              console.log(token);
               var response = Auth.isPasswordResetTokenValid({token: token})
              .then( function(response) {
                  console.log(response); // shows response
                  if(response.status == 404) {
                    //$scope.token-expiry = true;
                    return response;
                  }
                  if(response.status == 200) {
                    // $scope.user = response.data;
                  }
              })
              .catch( function(err) {
                console.log(err); // shows error
                return err;
              });
          }
        },
        controller: 'ResetPasswordCtrl'  
      });
  });

ResetPasswordCtrl 控制器：

'use strict';

angular.module('myApp')
  .controller('ResetPasswordCtrl', function ($scope, User, Auth, Mailer, $stateParams, promiseObj2) {
    $scope.errors = {};
    $scope.user = {};

    console.log(promiseObj2);   // This is coming undefined
    $scope.isTokenExpired = promiseObj2;  // Not able to inject promiseObj2

    $scope.isFormSubmitted = false;


  });

提前致谢

Answer 1

你的 resolve promiseObj2应该从 promise 服务返回一个 promise，这样你的控制器就会等到 promise 被解析。

return Auth.isPasswordResetTokenValid({token: token})

更新

如果您想在令牌请求失败时处理一些逻辑，那么您可以在您的承诺中处理它，这可以做一些事情，例如

1. 您可以使用$state.go('login')或$state.go('error')页面重定向到其他页面。

代码

promiseObj2: function($stateParams, Auth, $state){
  var token = $stateParams.token;
  console.log(token);
  return Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
        $state.go('error')
    }
    if(response.status == 200) {
        return response;
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    return err;
  });
}

2. 如果你想反正显示HTML网页，如果发生错误，那么你也可以从返回的数据.then的promiseObj2对象，将有关错误消息的信息。 以便将错误信息return给控制器

代码

promiseObj2: function($stateParams, Auth, $state){
  var token = $stateParams.token;
  console.log(token);
  return Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
      return {status: 404, data: "doen't found resource"}
    }
    if(response.status == 200) {
        return response;
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    return err;
  });
}

然后在控制器内部，我们将解析promiseObj2对象的 promise，然后您将在它的.then函数中获得 error 的值。

angular.module('myApp')
.controller('ResetPasswordCtrl', function ($scope, User, Auth, Mailer, $stateParams, promiseObj2) {
  $scope.errors = {};
  $scope.user = {};
  promiseObj2.then(function(resp){
    console.log(resp)
    $scope.isTokenExpired = resp.isTokenExpired;
  }, function(err){
    console.log(err)
  })
});

更新

如果我们想处理服务器返回4XX状态的情况，这意味着我们的 ajax 将调用不会返回承诺的 catch 函数。 我们可以通过使用$q创建自定义承诺来解决这种情况，我们将从promiseObj2解决它

代码

promiseObj2: function($stateParams, Auth, $state, $q){
  var token = $stateParams.token,
      deffered = $q.defer();
  console.log(token);
  Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
      //return {status: 404, data: "doen't found resource"}
      deffered.resolve({status: 404, data: "doen't found resource"});
    }
    if(response.status == 200) {
      //return response;
      deffered.resolve(response);
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    deffered.resolve(err);
  });
  return deffered.promise;
}