$success 来自 AngularJS 的回调函数

Question

我正在调用控制器来获取 API 值。如何在 $http 方法之外传递数组？

我需要将数组pa[] 传递给$scope.myData = pa;。

首先，console.log(pa) 打印值 [10,20,30,40]。

第二，console.log(pa)清空array[]。

JavaScript

function Ctrl($scope, $http) {
    var url = "https://spreadsheets.google.com/feeds/list/0AsXjbsnPIu06dGswZUV4WX/values?alt=json-in-script&callback=angular.callbacks._0";
    var pa = [];
    $http({
        method: 'JSONP',
        url: url
    }).success(function (data) {

        for (i = 0; i < data.feed.entry.length; i++) {
            var entry = data.feed.entry[i];
            pa.push(entry.gsx$productivity.$t);
            console.log(pa); //[10,20,30,40,50]
        }
    });

    console.log(pa) // [] empty array

    $scope.myData = pa;
}

如何在 $success 回调函数之外获取数组？

Answer 1

此代码是异步的。在$http 服务有机会从您的 API 调用中获取值之前，pa 已分配给 $scope.myData。

您需要使用$q 服务承诺库来控制您的代码流。像这样的：

function Ctrl($scope, $http, $q) {
  var url = "https://spreadsheets.google.com/feeds/list/0AsXjbsnPIu06dGswZUV4WX/values?alt=json-in-script&callback=angular.callbacks._0";
  var pa = [];
  var paPromise = $q.defer()

  $http({
    method: 'JSONP',
    url: url
  }).success(function(data) {

      for (i = 0; i < data.feed.entry.length; i++) {
        var entry = data.feed.entry[i];
        pa.push(entry.gsx$productivity.$t);
        console.log(pa); //[10,20,30,40,50]
      }
      paPromise.resolve(pa)
    });

  $scope.myData = paPromise.promise;
}

在这里，我们注入$q 服务并使用它实例化一个变量paPromise。接下来，我们将这个承诺交给$scope.myData。一旦 promise 在 $http 成功方法中得到解决，AngularJS 将通知您的 $scope 并更新值，它将反映在您的模板/DOM 上。

Answer 2

这真的没有多大意义。应该是这样的：

$scope.myData = [];
$http({
    method: 'JSONP',
    url: url
}).success(function (data) {

    for (i = 0; i < data.feed.entry.length; i++) {
        var entry = data.feed.entry[i];
        $scope.myData.push(entry.gsx$productivity.$t);
        console.log(pa); //[10,20,30,40,50]
    }
});

由于pa 是在控制器函数内部设置的，它不会给你任何东西来声明它，然后将$scope.myData 设置为等于pa。那只是自找麻烦。

Answer 3

如果你更喜欢jQuery Ajax，在外面使用extend函数返回成功数据，

$(function(){
    $.extend({
        returnData: function(url) {
            var result = null;
            var pa = [];
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'jsonp',
                async: false,
                success: function(data) {
                    for (i = 0; i < data.feed.entry.length; i++) {
                        var entry = data.feed.entry[i];
                        pa.push(entry.gsx$productivity.$t);
                    }
                    result = pa;
                }
            });
            return result;
        }
    });
});
finaldata = $.returnData('https://spreadsheets.google.com/feeds/list/0AsXjbsnPIu06dGswZUV4WX/values?alt=json-in-script&callback=angular.callbacks._0');
console.log(finaldata);