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

access ng-resource in function through $scope causes infinite loop

本文关键字：ng-resource 无限循环 scope 访问 函数 通过      更新时间：2023-09-26

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

在我的模板中，我显示了第一个模型"orders"的列表:

<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请求看起来很好。也许我想得太复杂了。

是的，因为您在视图中有showProduct，该函数在每个摘要上被调用，每次返回不同的承诺，因此它打破:

  • 每个摘要创建几次服务器请求
  • 每个请求与其他请求不同
  • 进行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

看着你的代码，我首先觉得它应该工作。无论如何，如果没有，那么我会尝试这样做:

在你的控制器中:

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

这将在数据从服务器到达时返回值。

相关文章：