Can't see ion-slide-box based on async data


I try (several hours so far) to make it work but with no success.

This is a single demo of ion-slide-box (grabbed from other question) that works fine: DEMO 1.

In next demo I wrapped above example with single $timeout to simulate async data population for my slider: DEMO 2

Nothing happens. I don’t see any slider.

I tried to add $apply to fire digest cycle - doesn’t help:

if($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest'){

Do I miss something?

Please help.


It will work only if I’ll change screen size, height or width. For me its showstopper and right now I didn’t find any workaround

Will be glad to open bug (seems like)


Is this based off my codepen?

Setting a timeout isn’t really the same as asynch data though.

From my exp. to test async call we use $timeout. It might be service side, not in controller. The $timeout returns promise so I expect the same behavior like async call. Further, I get the same behavior in both cases.

On start, my slider has length 0. After 1-2 sec I populate slider with list of items. It works only if data exists at the beginning.

My flow is pretty simple:

  • On view start slider model is empty - show loading…
  • ajax call
  • after 1-2 sec data received update slider model
  • hide loading

Is this based off my codepen?

yes, I took this example from one of your recent answers. Sorry, I didn’t find other example with slider :smile:

Setting a timeout isn’t really the same as async data though.

Will be nice if you can show how to simulate async call without $timeout

BTW I opened bug 1658


Fixed by adding: $ionicSlideBoxDelegate.update();

Fixed DEMO


1 Like

BTW, your demo drops an error:

Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.