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.