Ion-Slide-Box Update doesn't work

ionic-v1
1 
<ion-slide-box>
     <ion-slide ng-repeat="imageUrl in item.images">
              <img ng-src="{{imageUrl}}" />
      </ion-slide>
</ion-slide-box>

and my Controller:

 $scope.changeItem = function(differentItem) {
        $scope.item = differentItem;
        //$scope.$apply();
        $ionicSlideBoxDelegate.update();
    };

Whenever the changeItem() button is clicked, it changes $scope.item which i use in ng-repeat(in slide-box).

My problem here is that $ionicSlideBoxDelegate.update(); doesn’t update and set the pager index to 0 with the new number of images of the selected item even though the $scope.item changes.

2

Try

$timeout(function() {
        $ionicSlideBoxDelegate.update();
    });
2 Likes
3

The problem with ng-repeat and ion-slide-box is that the directive’s isolated scope is not being updated. A work around is to add an attribute directive to your slide-box.

angular.module('dynamicSlides', []).directive('dynamicSlides', function () {
        return {
            require: ['^ionSlideBox'],
            link: function (scope, elem, attrs, slider) {
                scope.$watch(function () {
                    return scope.$eval(attrs.dynamicSlides).length;
                }, function () {
                    slider[0].__slider.update();
                });
            }
        };
    });

<ion-slide-box dynamic-slides="item.images">

This saves you having to put a manual .update() command in your controller and is more affective than an arbitrary $timeout

4

Check this issue.

You just have to add an ng-if=“imgs” in your ion-slide-box. This way, the slidebox will not be created until data is available

5

This solution worked for cloudant.com update Array. BUT I put 500 ms in time.
Like this :
remoteDB.get(‘rodadas’).then(function(doc) {
$scope.util.rodadas = doc[‘rodadas’];
$timeout(function() {
$ionicSlideBoxDelegate.$getByHandle(‘rodadasBox’).update();
}, 500);