离子(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(抛出$ 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();
  });
}

我相信这会在不久的将来发生变化,因此您的代码将按预期工作.他们正在开发一个更新的幻灯片组件,但它在最后一刻被拉动以加速最新版本.