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（抛出$ dispatch已经引发的错误。）

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

Answer 1

更改范围变量后，需要调用$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 2

要正常工作，必须执行以下操作。经过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>

委托把手=＆＃34;图像查看器＆＃34;不必在离子滑动框中必须在<ion-content delegate-handle="mainhanddle"> 并且从控制器必须执行这两个命令：

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

每次通话结束时。

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

嗯，我希望我有所帮助，如果您需要更多详情，请随时与我联系。

Answer 3

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

而不是：

$scope.files = data;

尝试：

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

这应该允许您更新数组的内容而不会丢失初始内存引用。

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

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>

离子（angularjs）离子滑动盒，ng-repeat不更新

5 个答案: