Ion (angularjs) ion slider with ng repetition, not updated

Question

I have ion-slide-box, using ng-repeat, showing images that are retrieved 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 js:

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

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

When the getFiles () method is called (which starts a service that is not shown here), $ scope.files is updated successfully. But the DOM (images uploaded to the ion slide box) are not updated automatically. How to update the DOM? I tried timeout(nothing happens) and $scope.$apply(gives an error that has already been sent.)

, , , . , , / .

Answer 1

ng-repeat , () , :

angular.module('starter')
 .directive('repeatDone', function () {
   return function (scope, element, attrs) {
     if (scope.$last) { // all are rendered
       scope.$eval(attrs.repeatDone);
     }
   }
})

HTML:

<ion-slide-box>
  <ion-slide ng-repeat="day in week" repeat-done="repeatDone()" >

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

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

$scope.repeatDone = function() {
  $ionicSlideBoxDelegate.update();
  //$ionicSlideBoxDelegate.slide($scope.week.length - 1, 1);
};

Answer 2

$ionicSlideBoxDelegate.update() . - .

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

delegate-handle , , - .

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();
  });
}

, , , . , , .

Answer 3

. 8 -, .

<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>

delegate-handle = "image-viewer" , <ion-content delegate-handle="mainhanddle"> :

$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.$getByHandle('mainhanddle').update();

.

, <ion-slide-box delegate-handle="image-viewer" , , , nr-repeat, .

, , , , , .

Answer 4

:

$scope.files = data;

:

$scope.files.splice(0,$scope.files.length);
$scope.files = $scope.files.concat(data);

.

. , $scope.files data .

Answer 5

I decided to solve this problem using the ion-image-lazy-load library . Try this approach:

JS:

.controller('myCtrl', function ($scope) {
  $scope.images = imagesArray(); // Get array of objects with image urls
  $scope.slider = {
    options: {
     direction: 'horizontal',
     slidesPerView: '1',
     grabCursor: true
    }
  };
});

View:

<ion-content lazy-scroll>
   <ion-slide-box style="width:100% !important">
       <ion-slide ng-repeat="slide in images">
           <img image-lazy-src="{{slide.url}}" lazy-scroll-resize="true" image-lazy-loader="lines" style="width:100%">
       </ion-slide>
    </ion-slide-box>
</ion-content>