如何访问由 $resource get() 填充的 AngularJS 控制器中的数组？答案

【问题标题】：How to access an array in AngularJS controller populated by $resource get()?如何访问由 $resource get() 填充的 AngularJS 控制器中的数组？
【发布时间】：2013-03-17 18:06:27
【问题描述】：

我无法访问 AngularJS 控制器中的数组，但它可以在视图中使用。

在控制器中：.results 返回未定义

function TwitterCtrl($scope, $resource){

  $scope.twitter = $resource('http://search.twitter.com/:action',
      {action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
      {get:{method:'JSONP', params: {rpp: 4}}});

    $scope.twitterResult = $scope.twitter.get({q:"example"});

    //returns the resource object
    console.log($scope.twitterResult)

    //returns undefined
    console.log($scope.twitterResult.results);
}

在视图中：.results 返回推文数组

//This returns an array of tweets
{{$scope.twitterResult.results}}

【问题讨论】：

另见stackoverflow.com/questions/14373661/angularjs-data-assignment
谢谢。那篇文章描述了我一直在努力实现的目标。我将所有代码放在success 回调中，以便使用results 数组。我希望我可以将数组分配给一个变量并在该函数之外访问它。
你可以这样做——例如，$scope.twitterResult = $scope.twitter.get(...)`——只要你还添加一个$watch('twitterResult', function(newValue) { ... })来检测它什么时候得到异步更新。

标签： javascript angularjs angular-ui angularjs-scope

【解决方案1】：

$resource 调用是异步的，但 $resource 服务会在调用时立即为 resource.get 调用返回一个空白对象（或在 resource.query 调用时返回一个空数组）。然后，只有在 promise 得到解决（服务器返回响应）之后，$resource 服务才会将实际结果分配给 $scope.twitterResult 变量。

这就是为什么$scope.twitterResult 在立即访问 (console.log) 时为空白，但在您看来（似乎）“有效”。

您的视图表达式 {{$scope.twitterResult.results}} 起初也是未定义的，但 Angular 的 $parse 服务（负责解析视图表达式）不会输出 undefined，因为它被设计为不输出。一旦收到服务器响应，视图表达式就会更新，并显示twitterResult.results。

【讨论】：

$scope.twitterResult 在控制器中使用console.log 时不为空。它返回资源对象。我可以看到记录时要访问的results 数组。但是，当我在控制器中使用 $scope.twitterResult.results 时，我得到了 undefined。
@Dru，当您在控制台中手动单击 twitterResult 数组时，results 已被填充（异步）。这就是 Chrome 的工作方式。如果您改为记录console.log(JSON.stringify($scope.twitterResult))，您将看到results 在此语句实际执行时并未填充。