在AngularJS中将数据获取到$ scope失败

Question

我正在尝试通过这种方式将数据传递到$scope.post ，但是它并不想像我想象的那样工作。 我在控制台中没有收到任何错误，并且代码在PostController内部。

var PostController = function ($scope, $location, $routeParams, $http, Post, User) {
    $scope.post = {};
    $scope.getById = function (id) {
        return $http.get('/api/Post/' + id).success(function (data) {
            $scope.post = data;
        });
    }
        $scope.getById($routeParams.id);
        console.log($scope.post);
}

这也是路由：

when('/post/:id', { controller: PostController, templateUrl: 'post.html' }).

编辑，添加整个PostController。

Answer 1

getById是一个异步调用，它不会失败，您只是在等待！ 使用.then返回一个promise并在回调中进行赋值：

$scope.getById = function (id) {
    return $http.get('/api/Post/' + id).then(function (result) {
         return result.data
    });
}

$scope.getById($routeParams.id).then(function(data) {
    $scope.post = data;
});

Answer 2

console.log($scope.post); 在回调之前调用，因此没有值。如果要在控制台中获取值，请尝试此操作。

$scope.getById = function (id) {
        return $http.get('/api/Post/' + id).success(function (data) {
            $scope.post = data;
            console.log($scope.post);
        });
    }

Answer 3

$ http得到回报承诺 。 这意味着成功内部的函数不会立即被调用。 这不是直观的，但这就是承诺的工作方式。 要跟踪结果数据，请在成功函数中插入console.log

return $http.get('/api/Post/' + id).success(function (data) {
            $scope.post = data;
            console.log('$scope post: ',$scope.post);
        });

您将看到从get调用返回的数据以进行调试（您也可以在视图中打印此变量）。

这个怎么运作：

$ http.get返回一个promise，还添加了其他成功和错误功能。

在$ http.get之后，您可以链接到成功函数的承诺

$http.get('/api/Post/' + id).success

服务器成功响应后将调用此方法（http代码从200到299），发生故障时将调用错误功能（400-499代码）。

Answer 4

前两个答案可能是您解决问题的方法...因为console.log在HTTP请求的回调之前执行。 但是，最好也处理HTTP错误，这始终是一个问题。 以下是您如何执行此操作的示例：

$http.get('/api/Post/' + id).
  success(function(data, status, headers, config) {
    //handle success
  }).
  error(function(data, status, headers, config) {
    //handle error
  });