通过$ scope访问函数中的ng-resource导致无限循环

Question

我有一个Rails应用，并使用ng-resource通过JSON API访问两个模型。

在我的模板中，显示第一个模型“订单”的列表：

<li ng-repeat="order in orders">
  Order {{order.id}}: 
  Product: {{showProduct(order.product_id)}}
</li>

每个“订单”都包含一个product_id 。 现在，我想访问第二个模型（“产品”），并在ng-repeat显示带有相应“订单”的ID product_id的正确“产品”。

为了实现这一点，我想到了使用功能showProduct()并使用order.product_id作为参数。 但是，当我这样做时，会导致无限循环，不断向我的数据库发出GET请求。

这是我的app.js的重要部分

var app = angular.module('shop', ['ngResource']);

app.factory('models', ['$resource', function($resource){
  var orders_model = $resource("/orders/:id.json", {id: "@id"}, {update: {method: "PUT"}});
  var products_model = $resource("/products/:id.json", {id: "@id"}, {update: {method: "PUT"}});

  var o = { 
    orders: orders_model,
    products: products_model
  };
  return o;
}]);

app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
  $scope.orders = models.orders.query();

  $scope.showProduct = function(product_id){
    return models.products.get({id: product_id});
  };
}])

这些是控制台中的错误（由于是无限循环，因此很有意义）：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

在Rails控制台中的GET请求似乎很好。 也许我正试图认为比我需要的复杂得多。

Answer 1

是的，因为您在视图中有showProduct ，所以在每个摘要上都会调用该函数，每次返回不同的promise都会使其中断：

• 您创建每个摘要几次服务器请求
• 每个请求都彼此不同
• 进行10次迭代，直到两个值相等或引发异常

我建议你这样做：

models.orders.query().$promise
  .then(function(orders){
    $scope.orders = orders;
    //using lodash here, I recommend you use it too
    _.each(orders, function(order){
      models.products.get({id: order.product_id }).$promise
        .then(function(product){
          order.product = product;
        })
    });
  });

并在视图中：

<li ng-repeat="order in orders">
  Order {{order.id}}: 
  Product: {{order.product}}
</li>

---

但是使用此代码将为每个顺序触发一个查询，这很糟糕：它是N + 1反模式。

2个解决方案：

• 让订单直接包含产品数据
• 一个请求包含所有产品ID

Answer 2

查看您的代码，我首先觉得它应该可以工作。 无论如何，如果没有的话，我会这样尝试：

在您的控制器中：

  $scope.showProduct = function(product_id){
    var product = models.products.get({id: product_id}, function(){
      return product;
    });
  };

一旦数据从服务器到达，它将返回该值。