在对象数组上使用 $resource.query

Question

json

[ { "id":"0", "name" : "BCAA & GLUTAMINE", "brand" : "NRG FUEL", "price": "20", "description": "NRGFUEL 100% BCAA & Glutamine powder has been scientifically formulated to promote full muscle recovery, growth and repair whilst preventing muscle breakdown. Consisting of our instantized BCAA (2:1:1 RATIO) and absolute pure glutamine NRGFUEL’S BCAA and Glutamine powder will keep you in a positive state of growth and recovery. If you train hard, you need to recover hard.", "img" : "images/products/dietforcewhey.jpg" }, { "id":"1", "name" : "WHEY PLUS RIPPEDCORE", "brand" : "SCISMX NUTRITION", "price": "20", "description": "NRGFUEL 100% BCAA & Glutamine powder has been scientifically formulated to promote full muscle recovery, growth and repair whilst preventing muscle breakdown. Consisting of our instantized BCAA (2:1:1 RATIO) and absolute pure glutamine NRGFUEL’S BCAA and Glutamine powder will keep you in a positive state of growth and recovery. If you train hard, you need to recover hard.", "img" : "images/products/wheyplusrippedcore.jpg" } ]

控制器

app.controller('productDetails', ['$scope', '$routeParams', 'productService', function ($scope, $routeParams, productService) {
$scope.products = productService.query();
$scope.product = $scope.products[$routeParams.id];


console.log($scope.product)

}]);

服务

app.factory('productService', ['$resource', function ($resource) {
return $resource('json/products.json'); 

}]);

当我 console.log $scope.product 我得到“未定义”但 scope.products 工作正常。

有人可以解释一下我做错了什么吗？

Answer 1

啊，这一直是我在使用 $resource 时最头疼的问题之一！

问题在于 $scope.products = productService.query();是异步的。这意味着 $scope.product 将被设置为尚不存在的东西。也就是说，代码直接跳过 .query() 到该行。

您需要做的是将该语句放在异步函数的回调中，以便它在完成时运行。像这样：

$scope.products = productService.query(function(result){
  $scope.product = result[$routeParams.id];
});

希望对您有所帮助！ :)