How can I freshen the styles and directions in Ionic framework

Question

I load a list of images in a list . the positions of the are wrong because the image loading time

<ion-list class="timeLineList">
    <ion-item collection-repeat="item in items" ng-click="getDetail(item.id)" >
        <!-- ... -->
        <img ng-src="{{item.customer.photoUrl}}">
        <!-- ... -->
    </ion-item>
</ion-list>

I need to refresh the page once directives and images are fully charged.

I look for a solution like $(DOM)trigger("create") in jqueryMobile.

score 0 · Answer 1 · answered Dec 31 '15 at 19:38

The best solution is to set the item-width and/or item-height for the collection-repeat.

In my image gallery list, I calculate the width by taking the innerWidth of the window and dividing by 4 (for 4 columns). I then take the Math.floor of that and assign that as my height and width (I wanted square images).

My controller has:

ctrl.calculatedHeight = (Math.floor($window.innerWidth/4));

With the html:

<div
    class="center-box"
    ng-click="ctrl.openMedia(media)"
    collection-repeat="media in ctrl.media"
    item-width="ctrl.calculatedHeight + 'px'"
    item-height="ctrl.calculatedHeight + 'px'"
    item-render-buffer="8"
>
    <img
    ng-if="!media.isLoadingMedia"
    ng-src="{{media.dataUrl}}"
    ng-style="{height: ctrl.calculatedHeight + 'px', width: ctrl.calculatedHeight + 'px'}" />
    <ion-spinner
    ng-if="media.isLoadingMedia"
    ></ion-spinner>
</div>

(While loading, a spinner is displayed per picture.)

How can I freshen the styles and directions in Ionic framework

1 Answers1