javascript - Angular.js 深度对象解析

Question

这个问题有点宽泛，所以我会尽力简洁。

在处理应用程序的导入过程时，我遇到了以下数据结构:

[
  {
    type: foreignParent,
    children: [
      {
        type: foreignChild
        imported: true|false
      },
      {
        type: foreignChild
        imported: true|false
      }
    ]
  }
]

父级列表由一个 API 调用提供，该父级的子级列表由每个父级 (1+n) 的附加 API 调用提供，并且 imported 的值发生变化基于 localChildren 对象中是否存在某些内容(已导入平台的内容)。 foreignParent、foreignChild 和 localChild 是由三个不同服务提供的具有不同结构的三个不同对象。

接下来的问题是，使用此 Controller 操作中涉及的三个服务来构建一个大型对象数组，并简单地使用 ng-repeat 对其进行迭代是否更好:

<ul>
  <li ng-repeat="p in foreignParents">
    <ul>
      <li ng-repeat="c in p.children">
        {{c.imported ? 'Imported' : 'Not Imported'}}
      </li>
    </ul>
  </li>
</ul>

在这种情况下，如果 localChildren 服务中的对象列表发生变化，我必须设置观察程序，遍历哈希，并重新计算导入的值，另外跟踪对象

第二个选项似乎是为 imported 和 children 属性分配一个函数，我假设每个摘要周期都会计算该函数:

<ul>
  <li ng-repeat="p in foreignParents">
    <ul>
      <li ng-repeat="c in p.children()">
        {{c.imported() ? 'Imported' : 'Not Imported'}}
      </li>
    </ul>
  </li>
</ul>

更简单的第三个选项是拥有一个没有函数属性的 native 对象，并将函数放在 Controller 上:

<ul>
  <li ng-repeat="p in foreignParents">
    <ul>
      <li ng-repeat="getChildren(p)">
        {{isImported(c) ? 'Imported' : 'Not Imported'}}
      </li>
    </ul>
  </li>
</ul>

目前 Controller 看起来或多或少像这样:

app.controller('ImportCtrl', function ($scope, foreignParent, foreignChild, localChild) {

  $scope.foreignParents = [];

  $scope.githubRepositoryImported = function(repo) {
    localChild.RefNameExists(repo.ref_name);
  };

  foreignParent.Get().then(function(collection){
    _.each(collection.data, function(elem, i, list){
      foreignChild.Get(elem.login).then(function(collection){
        $scope.foreignParents[i].children = collection.data;
      });
    });
    $scope.foreignParents = collection.data;
  })

}]);

不幸的是，这并没有按照我预期的方式工作，但这是因为我这边的数据问题。我和一些 friend 讨论过这个问题，但没有人知道被广泛接受的正确方法是什么，所以我提出将其发布到 StackOverflow 以获得第二意见。

我只是不确定对于这些由多个服务组成的复杂嵌套列表来说，哪种方法是正确的，或者如何查看列表被消化了多少次，以及如何更改函数结果可能会被传播。我确信在某些情况下我可能需要显式的$scope.$watch或者甚至可能强制$scope。 $digest，但直到现在我还没有发现我必须深入研究 watch 或摘要。我还没有在野外找到足够复杂的示例应用程序来进行良好的比较。

Answer 1

据我了解，您可能需要使用 $q.all()当循环遍历集合数组并返回单个项目的 promise 时。

尝试这样的事情

getCollection().then(function(collection){
  var arr =[];
  angular.forEach(collection,function (item){
    arr.push(getSingular(item.id));
  });
  return $q.all(arr);
}).then(function(t){
  // note this response will be an array of the returned promises.
  $scope.foreignParents = t;
});

我冒昧地创建了一个Plunker example为你。

希望这对您有帮助。