angularjs - 在 AngularJS 中使用 promise 防止 ngRepeat 闪烁

Question

我有一组对象，比如 Products ，我可以使用 $resource 与之交互.在索引页面上，我想显示集合，或者，如果集合为空，则显示有用的消息。 IE。

在 Controller 中

$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 的位置，这很好用。会发生。如果是这样，或者如果来自服务器的响应有延迟，他们可能会在 promise 得到解决之前注意到轻微的闪烁。

鉴于“调用 $resource 对象方法会立即返回一个空引用”(请参阅​​ here )，在此示例中始终会出现这种闪烁。相反，我发现自己在写:

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

它负责闪烁。但是，我不太热衷于让我的观点确切地知道 products获得。特别是如果我稍后更改此设置。有什么我可以做的清洁工吗？我知道 ng-repeat 的回退正在开发中(请参阅 here )，但是，只是想知道在此期间是否有更清洁的解决方案。

Answer 1

您可以使用成功方法来设置对象:

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

或者使用 promise :

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

这样，在您收到响应之前，对象不会变为空。