带有 ng-repeat 的 Ionic (angularjs) ion-slide-box 不更新

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（加载到 ion-slide-box 中的图像）不会自动更新。如何刷新 DOM？我已经尝试了 timeout（没有任何反应）和 $scope.$apply（抛出 $dispatch 已经停止的错误。）

尽管这是一个移动应用程序，但在桌面浏览器中进行测试时，我可以调整浏览器的大小并自动显示图像。所以要么我弄清楚如何保持更新，要么找到更好的图像 slider/carousel 来使用。

Answer 1

而不是：

$scope.files = data;

尝试：

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

这应该允许您在不丢失初始内存引用的情况下更新数组的内容。

注意：我假设 $scope.files 和数据是数组。

Answer 2

您需要在更改作用域变量后调用$ionicSlideBoxDelegate.update()方法。 slidebox不会自动监听最新版本框架的变化

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

我相信这会在不久的将来发生变化，因此您的代码将按预期工作。他们正在开发一个更新的 slidebox 组件，但在最后一刻被取消以加快最新版本的速度。

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-slide-box 中必须在 <ion-content delegate-handle="mainhanddle"> 并且从控制器必须执行这两个命令：

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

每次通话结束时。

要在此处添加此内容，<ion-slide-box delegate-handle="image-viewer" 其他重要属性（例如取消和 nr-repeat）无法正常工作。

好吧，希望对您有所帮助，如果您需要更多详细信息，请随时与我联系。

Answer 4

您需要等待 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 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>

带有 ng-repeat 的 Ionic (angularjs) ion-slide-box 不更新

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

angularjs

ionic-framework