angularjs - 如何更新 Ionic 框架中的样式和方向

Question

我在 list 中加载图像列表。的位置是错误的，因为图像加载时间

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

一旦指令和图像充满电，我需要刷新页面。

我在 jqueryMobile 中寻找类似 $(DOM)trigger("create") 的解决方案。

Answer 1

最好的解决方案是item-width为.item-heightcollection-repeat

在我的图片库列表中，我通过获取窗口的 innerWidth 并除以 4（对于 4 列）来计算宽度。然后我取那个 Math.floor 并将其指定为我的高度和宽度（我想要方形图像）。

我的控制器有：

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

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

（加载时，每张图片都会显示一个微调器。）