将$http响应对象保存为$scope变量

我今天早些时候在stackoverflow上问了一个相关的问题，但由于代码的复杂性(无法发布)和我自己的新手，我无法从给出的答案中真正实现解决方案。

我的问题是，对于像

这样的代码

$http.get(ArbitraryInput).then(function (response) {$scope.data = response});

(你可以用上面的"success"代替"then"，我用"then"是因为根据更新后的$http api, success是不支持的)

我如何实际保存响应对象在$scope.data?从我到目前为止一直在做的事情来看，$scope.data是"未定义的"，当我稍后输入代码:

console.log($scope.data3);

谢谢!

更新一个

显然，如果我把console.log($scope.data); 在控制台将显示我想要的$scope.data。但如果它在外部，它将在控制台中保持"未定义"。换句话说:

$http.get(ArbitraryInput).then(function (response) {$scope.data = response; console.log($scope.data);});

将返回对象响应的类型。在控制台中，但是

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data);

将在控制台中返回"undefined"

您需要利用$http。Get返回一个承诺，并在任何需要访问解析数据的代码中链接到该承诺:

app.controller('Ctrl', function($scope, mainInfo){
    var request = $http.get(ArbitraryInput).then(function (response) {
        $scope.data = response; 
        return response; // this will be `data` in the next chained .then() functions
    });
    request.then(function (data) {/* access data or $scope.data in here */});

    $scope.someFunction = function () {
        request.then(function (data) {/* access data or $scope.data in here */);
    };
}) ;

问题已经回答，但我想提供一个替代解决方案，以防立即需要数据。不用在控制器/指令中直接调用$http服务，你可以将这些数据解析为路由中的依赖项，这样这些数据就可以立即使用了:

angular.module('myApp')
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/home', {
            templateUrl: '/path/to/template',
            controller: 'myCtrl',
            controllerAs: 'ctrl',
            resolve: {
                myData: ['$http', function($http) {
                    return $http.get('/end/point');
                }
            }
        }
    }]);

那么你的控制器可以像这样:

angular.module('myApp')
    .controller('myCtrl', ['myData', function(myData) {
        var self = this;
        self.data = myData;
    }]);

在你看来:

<pre>{{ctrl.data|json:4}}</pre>

将显示所有的数据作为JSON而不必调用$http在你的控制器

试试这个:

$http.get(ArbitraryInput).then(function (response) {
    $scope.data =     response;
    console.log($scope.data);
});

http美元。Get是异步的。参见AJAX

的解释

请注意，这是一个承诺(异步请求)，所以如果你做了这样的事情

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data)

它可能没有记录任何内容，因为您试图在请求完成之前记录它所以你可能需要使用像这样的

$http.get(ArbitraryInput).then(function (response) {
$scope.data = response;
console.log($scope.data);
});

这样你就可以确定console.log会在$scope.data

赋值之后执行

这是一个实用的答案，由用户Kirill Slatin提供。

如果像我一样，您需要使用该响应对象作为作用域变量，那么这里有一个技巧:

这将在控制台中返回"undefined"，并且像我一样，您可能无法在页面上使用该响应数据:

$http.get(ArbitraryInput).then(function (response) {$scope.data = response;});
console.log($scope.data);

但是，这应该可以工作:

    $http.get(ArbitraryInput)
         .then(function (response) {
            $scope.data = response;
            $scope.$apply()
});

$scope.$apply()将持久化响应对象，以便您可以使用该数据。

为什么需要这样做?

我一直试图为我的食谱应用程序创建一个"编辑"页面。我需要用所选食谱的数据填充表单。在发出GET请求并将响应数据传递给$作用域之后。形式，我什么都没有……$scope.$apply()和Kirill Slatin帮了大忙。欢呼的伴侣!

下面是我的editRecipeController的例子:

  $http.get('api/recipe/' + currentRecipeId).then(
    function (data) {
      $scope.recipe = data.data;
      $scope.form = $scope.recipe;
      $scope.$apply()
    }
);

希望有帮助!

相关内容

最新更新

热门标签：