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