Ion-slide-box and ng-repeat execution sequence issue

ionic-v1
1

I have an array of items shown by ion-slide-box with auto slide enabled. The array is requested from server side. if the array was returned after the page is shown, ion-slide draws a blank box on my screen. If I can make sure the array of items was initialized before page is shown, ion-slide-box display normally. I figured there must be an execution sequence issue with ion-slide-box directive and ng-repeat.
My original mark-up is like following:

    <ion-slide ng-repeat="s in recommendedClasses track by s.Id">
      <div class="box blue" style="height: 200px; background-image: url('img/xiaoxiao.jpg'); background-size: 100%">
      </div>
    </ion-slide>
  </ion-slide-box>

the following is the mark-up if blank box is shown:

I think “div class=“slider-slides” ng-transclude style=“width: 0px;”” is the reason.

2

Hmm, interesting. Can you throw together a demo of this in codepen or plnkr?

3

I found a workaround by adding a wrapper div for the ion-slide-box and use ng-if to control its existence in DOM, then the slidebox can show normally no matter when the array is fetched from server, like the following:

<div ng-if='recommendedClasses.length > 0'>
  <ion-slide-box>
    <ion-slide ng-repeat="s in recommendedClasses track by s.Id">
      <div style="height: 200px; background-image: url('img/xiaoxiao.jpg');     background-size: 100%">
      </div>
    </ion-slide>
  </ion-slide-box>
</div>
3 Likes
4

You can try something like this…

$scope.$watchCollection('recommendedClasses ', function (newCol, oldCol, scope) { $ionicSlideBoxDelegate.update(); });

or just update slidebox using $ionicSlideBoxDelegate.update(); when data is received from server.

2 Likes
5

thanks man, this saved my time. by the way when I only add ‘ng-if=‘recommendedClasses.length>0’. I solved the issue where images are not shown until resizing the page.
’

1 Like