1

我打印从列表中的服务获得的数据集。没关系。

所以，我有两个函数，*paint_other_avatars()* 和 *paint_more_participants()*，（它们是 http 调用）在每个项目中获取一些真实数据。

我的问题是 AngularJS 在获取所有数据之前不会呈现列表，因此页面需要大量加载。我想避免这种延迟。

最初，我计划通过一次调用来增强我的 SQL 查询以获取所有需要的数据，但现在我认为如果我异步执行它们或在此辅助调用之前呈现列表，那么这么多调用并不是那么糟糕。

我知道我的问题之一是在ng-init()中设置调用，但我不知道像ng-after()这样的任何指令

这是我的代码简化：

<li ng-repeat="plan in plans | orderBy:get_timing" ng-animate=" 'animate' " ng-class="status(plan)">
  <div class="desc_plan">
    <span class="gris_24">{{plan.title}}</span>
  </div>
  <div class="asistentes">
    <span id="other_avatars_{{plan.id}}" ng-init="paint_other_avatars(plan)"></span>
    <span id="more_participants_{{plan.id}}" ng-init="paint_more_participants(plan)" class="asistentes_mas"></span>
  </div>
</li>

为 j_walker_dev 编辑：

嗯，我正在尝试您的解决方案，但我发现了一个问题

$scope.plans = Plan.query({token: token});

我猜这种类型的调用是异步的，所以如果我把

angular.forEach($scope.plans, function(plan) {
  $scope.paint_other_avatars(plan);
  $scope.paint_more_participants(plan);
});

该程序没有进入 forEach，因为它没有时间去做。可能是这样？

4

2 回答 2

1

对于 ng-repeat 中的每次迭代，您都进行了两次单独的 http 调用？我认为你的问题出在那儿。通常在循环中进行任何类型的网络调用都是一个不好的做法。巨大的性能冲击。

我建议首先找出一种更好的设计模式来获取数据，而无需对每个数据进行单独调用。但是，如果您必须将请求从视图层分离到您的 javascript 控制器中。

我的意思是让你的初步电话得到​​计划。然后在 javascript 中对它们执行一个 for 循环，并在该循环中调用 paint_other_avatars 和 paint_more_participants。这样异步调用与模板渲染无关并且不会减慢，一旦计划加载，您的 html 将呈现。在后台，您正在调用paint_other_avatars 和paint_more_participants。

$scope.$watch('plans', function(newValue, oldValue) {

    if (newValue.length) {
        _.each(plans, function(plan) {
            paint_other_avatars(plan);
            paint_more_participants(plan);
        })      
    }

})

我不知道你的两个函数调用在做什么，但是这会让你的模板加载更快吗？

到

于 2013-09-25T08:50:05.700 回答
1

好吧，幸运的是 query() 函数似乎接受了回调。所以我这样解决了

Plan.query({token: $cookies.ouap_token}, function(result){
  $scope.plans = result;
  angular.forEach($scope.plans, function(plan) {
  $scope.paint_other_avatars(plan);
  $scope.paint_more_participants(plan);
 });
});

另一方面，我不确定这种方式是否更快：/

于 2013-09-25T16:27:50.903 回答