Prevent ngRepeat flicker with promise in AngularJS -
Prevent ngRepeat flicker with promise in AngularJS -
i have collection of objects, products
, can interact using $resource
. on index page, i'd either display collection, or, in case collection empty, display helpful message. i.e.
$scope.products = products.query();
in template class="lang-html prettyprint-override"><div ng-repeat="product in products"> ... </div> <div class="alert" ng-hide="products.length"> <p>oops, no products!</p> </div>
this works fine, provided user isn't staring @ spot ng-repeat
occur. if are, or if there delay in response server, may notice slight flicker, before promise resolved.
given that, "invoking $resource object method returns empty reference" (see here), such flicker in example. instead, find myself writing:
class="lang-html prettyprint-override"><div class="alert" ng-hide="!products.$resolved || products.length"> <p>oops, no products!</p> </div>
which takes care of flicker. however, i'm not keen on letting view know how products
obtained. if alter later on. there cleaner do? i'm aware fallback ng-repeat
in works (see here), however, wondering if there's cleaner solution in meantime.
you utilize success method set object:
products.query(function(data) { $scope.products = data; });
or utilize promise:
products.query().$promise.then(function(data) { $scope.products = data; });
this way, object doesn't become empty until response.
angularjs promise
Comments
Post a Comment