Firebase, ion-slide-box, & ng-repeat result in a blank page unless resized

Hello all!

I’ve been struggling to get ion-slide-box to play nicely with ng-repeat and a small Firebase db. This is my first time implementing Firebase and really could be considered my first time playing with Ionic, so please pardon my ignorance on both of these topics.

My issue is that when I use ng-repeat to create a slide for each item in the database, the browser only shows a blank page. When I resize the page at all, the data appears correctly! I believe I was able to reproduce this with local static data in a json file, but at this point I can consistently reproduce the issue with Firebase.

Here’s my Codepen that reproduces the issue:

You’ll notice that if you resize the window, a simple slide box with the name of a drink appears. Refreshing the page will reproduce the issue again.

My hunch is that the page is loading before the data is available, but I haven’t the slightest clue how to prevent that. Thanks in advance for any assistance!

try $ionicSlideBoxDelegate.update(); after your initializing.

Thanks for taking the time to reply!

Unfortunately, implementing $ionicSlideBoxDelegate.update(); into my code and testing with your Codepen produces the same result: Blank page until I resize the window.

Just a gentle bump here…still struggling to resolve this.

Any word on this? I’m still having the exact same issue…

Looks like I just fixed my error with $scope.$apply (http://jimhoskins.com/2012/12/17/angularjs-and-apply.html) followed directly by $ionicSlideBoxDelegate.update().

Hopefully this helps someone in the future.

1 Like