Question

离子项目中的以下代码假设events为空时显示消息“无记录”。但是，即使events不为空，该消息也会显示半秒钟然后消失？如何摆脱闪光灯？

<a ng-repeat="event in events">
  ....
</a>
<div ng-hide="events.length"> <!-- <div ng-show="!events.length"> behaves the same -->
  <div ....>
  No record.
  </div>
<div>

更新创建了一个可测试的plunker https://plnkr.co/edit/lchTKN6C8niAsALquHoF?p=preview，即使列表不为空，您仍可以看到红色消息仍然闪烁？

Answer 1

尝试ng-cloak和ng-hide/ng-show

<div ng-hide="events.length" ng-cloak> <!-- <div ng-show="!events.length"> behaves the same -->
  No record.
<div>

ngCloak 指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

对于ng-cloak

Documentation

<强>更新

由于$scope.events数组在服务返回完成之前已使用空值初始化。惯例是使用$promise对象在完成时访问延迟任务的结果。

var allEvents = EventService.query({ category: "Music" });

allEvents.$promise.then(function (response) {
    $scope.events = response;
});

Demo of working plunk

ng-repeat的空列表消息总是闪烁？

1 个答案: