离子(angularjs)离子滑动盒,ng-repeat不更新

发布时间：2020-12-17 18:02:25 所属栏目：安全来源：网络整理

导读：我有一个使用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-s

我有一个使用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？我已经尝试了超时(没有任何反应)和$scope.$apply(抛出$dispatch已经引发的错误.)

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

解决方法

你需要等待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);
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!