Ion-slide-box render timeout

1

Hi all,

I have a ion item list, and when an item is pressed the details page is opened. This details page contains an ion-slide-box, with an ng-repeat of all the items in the previous view where the one that is pressed is currently displayed.

This works great, but because of the many ion-slides that need to be rendered, the animation is laggy. Therefore I thought I would first wait for the animation to complete, then load the data en render the ion-slides. When doing that, the slider-slides is getting a width of 0px and there are no slider-pagers.

How can I wait for the transition animation to be completed, then load the data while displaying the ion-slides and pagers correctly?

Here’s some of my code:

controller:

$timeout(function() {

    // Get search result out of storage
    $scope.results = MyFactory.getResults();

    // Select the opened result
    $scope.selectedIndex = $stateParams.personId;

    $scope.currentPerson = $scope.results.items[$scope.selectedIndex];
    $scope.title = $scope.currentPerson.name;
}, 500);

view:

<ion-slide-box active-slide="selectedIndex" on-slide-changed="slideHasChanged($index)">
        <ion-slide ng-repeat="person in results.items">
            <ion-content>
            <!-- Content etc. -->
            </ion-content>
       </ion-slide>
</ion-slide-box>
2

I had the same problem. Found a solution.

Add a wrapper around your ion-slide-box and add an ng-if=“renderSlides”. As soon as you are done with loading all your results set the renderSlides value to true.

Cheers, Robin