带有ng-repeat的离子（angularjs）离子滑动盒未更新

小编典典

带有ng-repeat的离子（angularjs）离子滑动盒未更新

angularjs

我正在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已经清除的错误。）

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

阅读 222

2020-07-04

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

2020-07-04