带有 ng-repeat 的 Ionic (angularjs) ion-slide-box 不更新 [英] Ionic (angularjs) ion-slide-box with ng-repeat not updating

问题描述

我有一个 ion-slide-box 使用 ng-repeat 显示从远程服务器获取的图像.

I have an ion-slide-box using ng-repeat showing images that are fetched from a remote server.

    <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 已经发生的错误.)

When getFiles() is called (which fires a service that is not shown here), $scope.files is updated successfully. But the DOM (the images loaded into the ion-slide-box) are not automatically updated. How do I refresh the DOM?? I have tried timeout (nothing happens) and $scope.$apply (throws error that $dispatch already sterted.)

尽管这是一个移动应用程序，但在桌面浏览器中进行测试时，我可以重新调整浏览器的大小并自动显示图像.所以要么我想办法保持更新，要么找到一个更好的图像滑块/轮播.

Even though this is a mobile app, when testing in desktop browser, I can re-size the browser and the images automatically display. So either I figure out how to keep this updated, or find a better image slider/carousel to use.

推荐答案

你需要等待 ng-repeat 被渲染，然后才能更新()你的幻灯片，使用这个指令:

You need to wait the ng-repeat is rendered before being able to update() your slidebox, use this directive :

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

这篇关于带有 ng-repeat 的 Ionic (angularjs) ion-slide-box 不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！