javascript - Angular ui-router 未将解析注入(inject) Controller

Question

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

我想要做什么:我已向用户提供了密码重置链接，以便更改他的密码。链接类似于:

localhost:9000/reset/:token

现在，我创建了一个简单的 View ，它显示一个输入框，用于在 token 有效时更改密码，否则根据 Angular 的 ng-show 属性，如果 token 无效，则打印错误。

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

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

现在的问题是什么？

好吧，在我伤了太久之后，我决定在这里发布我的问题。有人可以帮我吗？

我的问题:

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

2. 现在，如果 token 无效，我会从后端 API 返回 404 作为响应。但前端的工厂方法将其视为 err(这是 Node.js 中所期望的吗？)，并且抛出 err，导致 deferred.reject()。现在，如果我使用 ui-router 定义，如果 promise 没有得到解决，那么 View 将不会被渲染，对吗？有什么方法可以将这个错误也传递给我的 Controller 吗？我要求传递 err 的原因是，我的 View 的 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 Controller :

'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，这样你的 Controller 就会等待直到promise得到解决。

return Auth.isPasswordResetTokenValid({token: token})

更新

如果你想处理 token 请求失败时的一些逻辑，那么你可以在你的 promise 本身中处理它，这可以做一些事情，比如

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;
  });
}

如果您想在发生错误时显示 html 页面，那么您还可以从 promiseObj2 对象的 .then 返回数据，其中包含有关错误消息的信息。这样错误信息就会返回给 Controller

代码

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;
  });
}

然后在 Controller 内部，我们将解析 promiseObj2 对象的 Promise，然后您将在其 .then 函数中获取错误值。

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 将调用不会返回 Promise 的 catch 函数。我们可以通过使用 $q 创建自定义 Promise 来解决这种情况，我们将从 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;
}