通过 $scope 访问函数中的 ng-resource 会导致无限循环
access ng-resource in function through $scope causes infinite loop
我有一个 Rails 应用程序并使用 ng-resource 通过 JSON API 访问两个模型。
在我的模板中,我显示了第一个模型的列表 "orders":
<li ng-repeat="order in orders">
Order {{order.id}}:
Product: {{showProduct(order.product_id)}}
</li>
每个 "order" 包含一个 product_id
。现在我想访问第二个模型 ("products") 并在 ng-repeat
中显示正确的 "product" 以及相应 "order" 的 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 请求似乎正常。也许我想的比我需要的要复杂得多。
看着你的代码,我首先觉得它应该可以工作。无论如何,如果没有,那么我会这样尝试:
在您的控制器中:
$scope.showProduct = function(product_id){
var product = models.products.get({id: product_id}, function(){
return product;
});
};
这将 return 数据从服务器到达后的值。
是的,因为您在视图中有 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 的请求
我有一个 Rails 应用程序并使用 ng-resource 通过 JSON API 访问两个模型。
在我的模板中,我显示了第一个模型的列表 "orders":
<li ng-repeat="order in orders">
Order {{order.id}}:
Product: {{showProduct(order.product_id)}}
</li>
每个 "order" 包含一个 product_id
。现在我想访问第二个模型 ("products") 并在 ng-repeat
中显示正确的 "product" 以及相应 "order" 的 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 请求似乎正常。也许我想的比我需要的要复杂得多。
看着你的代码,我首先觉得它应该可以工作。无论如何,如果没有,那么我会这样尝试:
在您的控制器中:
$scope.showProduct = function(product_id){
var product = models.products.get({id: product_id}, function(){
return product;
});
};
这将 return 数据从服务器到达后的值。
是的,因为您在视图中有 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 的请求