ионный (angularjs) ион-слайдер с ng-repeat не обновляется

Question

У меня есть ion-slide-box с использованием ng-repeat, показывающий изображения, которые извлекаются с удаленного сервера.

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

и JS:

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

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

Когда GetFiles() вызывается (который запускает сервис, который не показан здесь), $ scope.files успешно обновлен. Но DOM (изображения, загруженные в ионный слайд-бокс) не обновляются автоматически. Как обновить DOM? Я попытался timeout (ничего не происходит) и $scope.$apply (бросает ошибку, что $ диспетчерской уже sterted.)

Несмотря на то, что это мобильное приложение, при тестировании в браузере настольного компьютера, я могу изменить размер браузер и изображения автоматически отображаются , Поэтому либо я выясню, как сохранить это обновление, либо найти лучший слайдер изображения/карусель для использования.

Answer 1

Вам нужно подождать нг-повтора оказывается, прежде чем быть в состоянии обновить() ваш slidebox, используйте эту директиву:

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

Вместо:

$scope.files = data; 

Try:

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

Это позволит вам обновить содержимое массива без потери первоначального обращения к памяти.

Примечание: Я предполагаю, что $ scope.files и data являются массивами.

Answer 3

После изменения переменной области видимости необходимо вызвать метод $ionicSlideBoxDelegate.update(). Слайд-бокс автоматически не прослушивает изменения в последней версии фреймворка.

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

Вы должны установить атрибут delegate-handle и использовать, чтобы убедиться, что вы не мешать с другими slideboxes вы делаете загружены в то время.

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 4

Для правильной работы необходимо выполнить следующее. После 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> 

делегат-ручка = «изображение просмотра» не должен быть в ионно-слайд-поле должно быть в <ion-content delegate-handle="mainhanddle"> и от контроллера должен выполнить эти две команды:

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

В конец каждого вызова.

Чтобы добавить это, <ion-slide-box delegate-handle="image-viewer" Другие важные свойства, такие как отмена и, например, nr-repeat, не работают должным образом.

Надеюсь, я помог, если вам нужна дополнительная информация, пожалуйста, не стесняйтесь обращаться ко мне.

Answer 5

Я решил решить эту проблему, используя библиотеку ion-image-lazy-load. Попробуйте с этим подходом:

JS:

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

Вид:

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