来自AngularJS的$ success回调函数

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

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

您需要使用$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。一旦在$http成功方法中解决了承诺，AngularJS就会通知您$scope并更新值，并将其反映在模板/
DOM上。