Angular 资源依赖

Question

我有一个 angular 应用程序，使用 $resource，它有一些使用 Rest API 进行某些调用的工厂。

场景是获取以下三个对象： 1）项目， 2) 项目项目和 3) 项目项目详情。

所有三个对象都被定义为 3 个不同的工厂，如果我一个一个地尝试它们，它们都可以正确执行。但是，我试图一次加载包含所有三个工厂的页面。

我尝试了几种不同的方法，但都失败了。问题是工厂ProjectItemDetails对父工厂数据有依赖，执行时不可用

工厂

angular.module('myProject')
  .factory ('Project', function($resource) {
    return $resource('api/project/:id', {id: '@id'});
  })
  .factory ('ProjectItems', function($resource) {
    return $resource('api/projectitems/:id', {id: '@id'});
  })
  .factory ('ProjectItemDetails', function($resource) {
    return $resource('api/projectitemdetails/:id', {id: '@id'});
  });

Project 和 ProjectItems 请求相同的 ID，但 ProjectItemDetails 请求在每个 ProjectItem 中找到的 detail_id。

现在，另外，对于每个 ProjectItem，我想对 ProjectItemDetails 中的特定字段（金额）执行求和运算。即一个 ProjectItem 有 3 个详细记录，每个记录的数量为 150，我想在每个 ProjectItem 中添加一个字段，显示这些详细信息的总和 (450)。

从后端我看到所有 API 都已执行，问题是将数据返回到 angular。

控制器

angular.module('myProject')
  .controller('SingleController', function($scope, Project, ProjectItems, ProjectItemDetails, $rootScope, $location, $routeParams) {
    $scope.project = Project.query({id: parseInt($routeParams.id, 10)});

    ProjectItems({id: parseInt($routeParams.id, 10)}, function(data) {
        $scope.projectitems = data;
        for (var i=0; i < $scope.projectitems.length; i++) {

            ProjectItemDetails.query({id: parseInt($scope.projectitems[i][“itemid”])}, function(data){
                $scope.projectitems[i].details = data;

                var amnt = 0;
                for (var j = 0; j < $scope.projectitems[i].details.length; j++) {
                    amnt += $scope.projectitems[i].details[j].AMOUNT;
                };

            });
        };
    });

我在将数据分配给 projectitem 时出错 "TypeError: Cannot set property 'details' of undefined" 经过大量搜索后，似乎 "i" 超出范围即我有 3 个项目 (0,1,2)，我是 3.

有人能帮忙吗？

Answer 1

您运行是这个的变体：

javascript-closure-inside-loops-simple-practical-example

当 ProjectItemDetails.query 解析并且你在它的函数内时，i 是 3。

尝试从新函数调用 ProjectItemDetails.query，将 i 作为参数传递给该函数。

Angular 资源依赖

Angular resource dependency

rest

angularjs

angular-resource