Ionic (angularjs) ion-slide-box with ng-repeat not updating

Question

I have an ion-slide-box using ng-repeat showing images that are fetched from a remote server.

    <ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
      <ion-slide ng-repeat="slide in files">
        <img ng-src="{{slide.filename}}" > 
      </ion-slide>
    </ion-slide-box>

and the js:

  $scope.getFiles = function() {
     Files.query({  
        //some parameters

     }).$promise.then(function(data) {
        $scope.files = data;
  });

When getFiles() is called (which fires a service that is not shown here), $scope.files is updated successfully. But the DOM (the images loaded into the ion-slide-box) are not automatically updated. How do I refresh the DOM?? I have tried timeout (nothing happens) and $scope.$apply (throws error that $dispatch already sterted.)

Even though this is a mobile app, when testing in desktop browser, I can re-size the browser and the images automatically display. So either I figure out how to keep this updated, or find a better image slider/carousel to use.

Answer 1

You need to call the $ionicSlideBoxDelegate.update() method after you have changed the scope variable. The slidebox does not automatically listen for changes in the latest version of the framework.

http://ionicframework.com/docs/nightly/api/service/$ionicSlideBoxDelegate/

You should set a delegate-handle attribute and use that to make sure you don't interfere with any other slideboxes you make have loaded at the time.

html

<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
  <ion-slide ng-repeat="slide in files">
    <img ng-src="{{slide.filename}}" > 
  </ion-slide>
</ion-slide-box>

js

$scope.getFiles = function() {
  Files.query({  
  //some parameters

  }).$promise.then(function(data) {
    $scope.files = data;
    $ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
  });
}

I believe this will change in the near future so your code will work as expected. They are working on an updated slidebox component but it was pulled at the last minute to speed up the latest release.