离子（angularjs）离子滑动盒NG重复不更新 [英] Ionic (angularjs) ion-slide-box with ng-repeat not updating

问题描述

我有一个离子滑动盒使用 NG-重复表示是从远程服务器获取图像

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（装入离子滑框图像）不会自动更新。我如何刷新DOM？我曾尝试暂停（没有任何反应）和 $范围。$适用（抛出错误$派遣已经sterted）。

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-重复是能够更新之前）呈现（您slidebox，使用这个指令：

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

这篇关于离子（angularjs）离子滑动盒NG重复不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！