Stuck getting lazy loaded <ion-slides> to work


#1

My app was getting very slow due to the large number of big slides I have in a <ion-slide-box>.

I have been trying to implement the “lazy loading of slides”-pattern from Dynamic Slides

But I’m stuck and unable to figure what’s going on. I have a moderatly complex app which is running fine. My working slide box tag looks like this:

<ion-slide-box show-pager="false" on-slide-changed="slideChanged(index)">
    <ion-slide ng-repeat="single in bostad">
        ....

This works fine, albeit slow as the number and size of the slides grow. I get slideChanged() calls with the correct index. But as soon as I change it to:

<ion-slide-box show-pager="false" on-slide-changed="slideChanged(index)">
    <ion-slide ng-repeat="single in bostad | filter:{viewable : true}">

… I get several slides rendered on top of each other, and each time I swipe I get a call to slideChanged with index = NaN.

I have tried both b11 which Calendee’s post is based on, and b13. I change only this one line in the whole app, nothing else.

[Edit] I should mention that the template for the <ion-slide-box> is displayed using $ionicModal, not as a top level view as in the linked example, but I fail to see how that should cause the experienced behaviour…

I wold be greatful for any tips on how to figure out whats going on!

/j