Ion-slide-box and ng-repeat

1

Would one expect this combination to work?

<ion-slide-box show-pager="false" auto-play="true" does-continue="true">
  <ion-slide collection-repeat="city in cities">
    <h1>{{city.name}}</h1>
  </ion-slide>
</ion-slide-box>

What I am seeing is a layering of the text and no slide box functionality.

However, outside of an emulator and just in Chrome, if I resize the window, it seems to kick it into shape.

2

Looking at the generated DOM, it looks ok, so maybe just a hook not getting fired when ng-repeat is used.

This does work fine if not using ng-repeat

<div class="slider-slides" ng-transclude="" style="width: 0px;">
            <!-- ngRepeat: city in cities --><ion-slide ng-repeat="city in cities" class="slider-slide" style="transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(-973px, 0px) translateZ(0px);">
                <div>
                    <h1 class="ng-binding">Boston</h1>
                </div>
            </ion-slide><!-- end ngRepeat: city in cities --><ion-slide ng-repeat="city in cities" class="slider-slide" style="transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
                <div>
                    <h1 class="ng-binding">New York</h1>
                </div>
            </ion-slide><!-- end ngRepeat: city in cities --><ion-slide ng-repeat="city in cities" class="slider-slide">
                <div>
                    <h1 class="ng-binding">San Francisco</h1>
                </div>
            </ion-slide><!-- end ngRepeat: city in cities --><ion-slide ng-repeat="city in cities" class="slider-slide">
                <div>
                    <h1 class="ng-binding">Washington DC</h1>
                </div>
            </ion-slide><!-- end ngRepeat: city in cities -->
        </div>
3

Hello,

try to add this in your controller after “cities” is initialized:

// add $ionicSlideBoxDelegate dependency in your controller first
$timeout( function() {
$ionicSlideBoxDelegate.update();
}, 50);

It seems to force re-computation of slides’ properties on the initial load.

2 Likes
4

So, fortunately this does work. I actually trigger the update when the data has completed loading and the timing seems to be perfect, no noticed delay and updates properly every time.

So, maybe this is more of an issue using ionicSlideBox with async data.

5

I have same problem.
Problem that, when Ionic parse html, it check:

if (slides.length < 2) options.continuous = false;

and even if you run $ionicSlideBoxDelegate.update(); it’s not help, because options is not checked again.

I found solution - do not allow render our slider before getting data for ng-repeat.

For example, for your code should be like this:

<ion-slide-box show-pager="false" auto-play="true" does-continue="true" ng-if="cities">
  <ion-slide collection-repeat="city in cities">
    <h1>{{city.name}}</h1>
  </ion-slide>
</ion-slide-box>
2 Likes
6

had the same issue.

fixed it by just adding cache: false to the state provider :slight_smile:

7

@SOTKA, after weeks of trouble with ion-slide-box and freaky race conditions, I fortunately found your solution and it works perfectly! Thanks a lot.

I already had the idea to hide the slide box with ng-show till computation is finished, but unfortunately didn’t use ng-if before.

1 Like
8

fixed this work. thanks elSolo

9

@xorox thanks, in my case it works.

10

@SOTKA Thank you so much!!!

11

Thankyou $ionicSlideBoxDelegate.update(); did the job for me but I am facing another issue after this… auto-play=“true” and does-continue=“true” do not work now ?? How to resolve this