范围数组变量始终显示0,但其余的JSON显示角度数据

时间:2014-04-11 17:29:55

标签: angularjs angularjs-directive angularjs-scope

我正在使用angularjs和Spring rest服务。这是一个非常简单的场景,但不知道这是什么问题!

这是我的控制器,在其中返回service.js中定义的daya数组。在下面的代码中,控制台总是返回0。

controller.js

$scope.allreviews = PostFactory.reviews.query({key: reviewId});
    console.log('read more' + $scope.allreviews.length);

services.js

reviews: $resource('/ngdemo/web/posts/review/:key', {}, {
        query: {method: 'GET', isArray: true, params: {key: '@key'} },
        create: {method: 'POST'}
    })

现在,在评论方法“/ ngdemo / web / posts / review /:key”中定义的其余服务返回数据,正如我在Firefox控制台GET方法中看到的那样。但它没有到达控制器,因此无法访问数据。你能帮忙建议一下这个问题吗?

我尝试删除isArray:true但它抛出错误$ destination.push是函数或错误。

请建议

2 个答案:

答案 0 :(得分:1)

您遇到的问题与$resource的异步性质有关。每次将资源查询分配给范围的某个属性时,实际上都会分配某种空对象,一旦相关响应到来,将会填充这些空对象。因此,您无法以同步方式直接访问数据。有几种不同的方法可以让您在数据到来后访问它们。以下是两种可能的方法(使用回调函数作为查询和$scope.$watch()的参数):

<强>的JavaScript

angular.module('app',['ngResource']).
  controller('PostController',['$scope', 'PostFactory', function($scope, PostFactory) {
    var reviewId = 'post.json';

    $scope.allreviews = PostFactory.reviews.query({key: reviewId}, function(allreviews) {
      console.log('(callback) read more ' + $scope.allreviews.length); // <= will log correct length
    });

    console.log('read more ' + $scope.allreviews.length); // <= will always log 0


    $scope.$watch('allreviews.length', function(length) {
      if(length) { // <= first time length is changed from undefined to 0
        console.log('(watch) read more ' + $scope.allreviews.length); // <= will log correct length
      }
    });
  }]).
  factory('PostFactory', ['$resource', function($resource) {
    return {
      reviews: $resource(':key', {}, {
        query: {method: 'GET', isArray: true, params: {key: '@key'} },
        create: {method: 'POST'}
      })
    }
  }]);

Plunker:http://plnkr.co/edit/vy52X0lJkGSL4neSeNUy?p=preview

答案 1 :(得分:0)

在退出结果之前,您必须等待查询完成。来自angular docs

  

重要的是要意识到调用$ resource对象方法   立即返回一个空引用(对象或数组取决于   IsArray的)。一旦数据从服务器返回现有数据   引用填充了实际数据。

所以你可以做这样的事情

$scope.allreviews = PostFactory.reviews.query({key: reviewId} function() {
    console.log('read more' + $scope.allreviews.length);
});