Ionic Slidebox breaks when I call a function

ionic-v1
1

I made a demo with some test data.

Click: “Load Images”

The problem is when I call a function and try to bind my data, the slidebox images overlap. Any help? Thanks

Note that the images I’m trying to load are .png

2

Hey there first:

use correct ionic syntax, if you are using header-bar --> not need for ion-pane around all. the slidebox should be wrapped in ion-content.

The problem -> you are building an empty slideshow initially.
After you click the button -> slides are available, but the slidebox does not know that and needs to rerender.
Two ways to this in your example:

  1. ng-if=“slydes.length” at the ion-slide-box --> to only show and render the slideshow if images are there
  2. in your controller at the end of the test function call $ionicSlideBoxDelegate.update(); to rerender the slidebox

http://play.ionic.io/app/b356684964a9

I would prefer solution 2 :wink:

1 Like
3

Yep that worked, my problem was that I called $ionicSlideBoxDelegate.update(); immediately after calling the data from my backend.

Now the dots appear but they still overlap, :confused:

Thanks

Edit: your first method worked! thanks again.