The message for empty list for ng-repeat always flash?

问题

The following code from an ionic project supposes to display message "No record" when the events is empty. However, the message always show for half a second and then disappear even when events is not empty? How to get rid of the flash?

<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>

Update: A testable plunker is created https://plnkr.co/edit/lchTKN6C8niAsALquHoF?p=preview, you can see the red message still flash even the list is not empty?

回答1:

Try ng-cloak along with ng-hide/ng-show

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

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Documentation for ng-cloak

UPDATE:

Since the $scope.events array got initialized with an empty value before the return of the service completes. The convention is to use the $promise object to get access to the result of the deferred task when it completes.

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

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

Demo of working plunk

来源：https://stackoverflow.com/questions/37506812/the-message-for-empty-list-for-ng-repeat-always-flash