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

发布时间：2020-12-17 17:20:34 所属栏目：安全来源：网络整理

导读：我有一组对象,比如Products,我可以使用$resource进行交互.在索引页面上,我想显示集合,或者,如果集合为空,则显示有用的消息.即在控制器中 $scope.products = Products.query(); 在模板中 div ng-repeat="product in products" .../divdiv class="alert" ng-h

我有一组对象,比如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>

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

鉴于此,“调用$resource对象方法会立即返回一个空引用”(参见here),这样的闪烁将始终在此示例中.相反,我发现自己在写：

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

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

解决方法

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

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

或使用承诺：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!