Slides generated with ng-repeat causing issues (slide-box)

ionic-v1
41

Has anyone fixed this in css as the css is uncommented in beta 13 and still doesnt work…

42

This solution worked for me :slight_smile:

43

I ended up using ng-if to solve this problem.

44

Hey, this issue can be solved by using the update method as you have mentioned, the trick is when to mention it.

Now in the newest version, the following code always worked for me.

$scope.$on(‘$ionicView.enter’, function(){
$timeout(function() {
$ionicSlideBoxDelegate.$getByHandle(‘coursecontent’).update();
$ionicSlideBoxDelegate.$getByHandle(‘coursescope’).update();
},0)
});

First, we need to know when it is rendered. Next, using $timeout and set it to zero will ensure it start at the first digest cycle of angular, so it will worked always.

Remeber, some view is cached in Ionic, so instead of using $ionicView.loaded , we use $ionicView.enter.

45

Worked perfectly for me too… :smile: Thanks.

46

Worked like a charm! Thanks. :slight_smile:

47

@amrudesh @avago @coen_warmer @cata_rock @mrameezraja Is anyone got the Solutions on this issue?

48

@Thamil I haven’t had any problem in Beta 13 or 14 using $ionicSlideBoxDelegate.update();

1 Like
49

This is my fix, call update on state change success, and set a timeout. Works well.

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
  $timeout(function() {
    $ionicSlideBoxDelegate.update();
  }, 50);
});
1 Like
50

if $ionicSlideBoxDelegate.update(); isn’t working for you, It should . You can fix this issue in your css. I noticed that the class
’.slider-slides’ wasn’t being updated. the width was being set to 0.

You can wrap you code in a simple directive that uses jquery or document.getElementById and change its width to $(window).widht() * the number of slides. This is very janky, but if you are out of solutions, you can give it a try.
Hope this works!

51

Maybe this can work for you:

Service

GetImages : function() {
    return $http.get(BASE_URL).then(function(response){
        images = response;
        return images;
   });
}

Controller

Service.GetImages().then(function(response){
    $scope.images = response;
    $ionicSlideBoxDelegate.update();
});

View

<ion-slide-box>
    <ion-slide ng-repeat="image in images">
        <img ng-src="{{image.file}}"/>
    </ion-slide>
</ion-slide-box>
1 Like
52

Great solution
Thanks very well

53

I have the same problem. So, what is the solution?

54

Fixed my issues wherein I was getting banner images via a REST api. Thanks! :smile:

55

Worked perfectly thank you.

56

This worked perfectly. Thank you!

57

Thank you , this worked perfectly.

Cordialement || Best Regards

58

Dear All,

I have issues in using ion-slider -box, it is working after refresh the window. First time, it wont display images. Here is the code.

.controller(‘HomeCtrl’, function($scope, Service, $ionicSlideBoxDelegate, $timeout, $rootScope) {

$scope.topstories = [];

Service.getAllTopStories().then( function(response) {
$scope.topstories = response.data;
$ionicSlideBoxDelegate.update();
});

});

and HTML Code

{{slide.post_title}}

I am new to the IONIC framwork, but i have trying based on examples, it is not working as expected.

Can you advice me on where i did mistake? and solve my problem,

Thanks
Murugavel

59

Could you please provide your view code?

61

Well,I’ve met this situation before ;
my soution is adding a ng-if to the ion-slide-box tag
like this:

          <ion-slide-box  does-continue="true" auto-play="true" show-pager="true" slide-interval="4000" on-slide-changed="" auto-play="true" ng-if='product'>
              <ion-slide  ng-repeat='images in product.images.l  track by $index'   show-pager='true' >
                <div class="menu-item "><img src='images/1.jpg' width='100%' ></div>
              </ion-slide>
          </ion-slide-box>
1 Like