在AngularJS中防止带有承诺的ngRepeat闪烁

Question

我有一组对象,比方说Products,我可以使用它们进行交互$resource.在索引页面上,我想显示集合,或者,如果集合为空,则显示有用的消息.即

在控制器中

$scope.products = Products.query();

在模板中

<div ng-repeat="product in products">
  ...
</div>

<div class="alert" ng-hide="products.length">
  <p>Oops, no products!</p>
</div>

如果用户没有盯着ng-repeat会发生的地点,这种方法很好.如果它们是,或者如果服务器的响应有延迟,它们可能会在承诺解决之前发现轻微的闪烁.

鉴于此,"调用$ resource对象方法会立即返回一个空引用"(请参见此处),此示例中将始终显示此类闪烁.相反,我发现自己在写:

<div class="alert" ng-hide="!products.$resolved || products.length">
  <p>Oops, no products!</p>
</div>

这照顾了闪烁.但是,我不太热衷于让我的观点知道如何products获得.特别是如果我稍后改变它.我能做些什么更干净的事吗？我知道有一个后备ng-repeat工作正在进行中(见这里),但是,想知道在此期间是否有更清洁的解决方案.

Answer 1

您可以使用success方法设置对象:

Products.query(function(data) {
    $scope.products = data;
});

或使用承诺:

Products.query().$promise.then(function(data) {
   $scope.products = data;
});

这样,在得到响应之前,对象不会变空.