解决Ionic的ion-slide-box 2条数据渲染问题

来源：互联网发布：ubuntu如何卸载程序编辑：程序博客网时间：2024/06/06 23:42

当slider数据列表是动态获取时，如果数据结果只有2条数据时，slider列表会多复制俩个，通过下面的slideChange方法做个判断可以解决这个bug

starter

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 auto-play="true" does-continue="true" slide-interval="3000" on-slide-changed="slideChanged($index)">　　<ion-slide ng-repeat="pic in pics" repeat-done="repeatDone()"><img ng-src="{{pic}}" src="" alt="" width="" height="" /></ion-slide></ion-slide-box>

controller

app.controller('defaultCtrl', function($scope, $timeout, $ionicSlideBoxDelegate) {    $scope.slideChanged = function(index) {          $scope.slideIndex = index;          if ( ($ionicSlideBoxDelegate.count() -1 ) == index ) {              $timeout(function(){                  $ionicSlideBoxDelegate.slide(0);              },3000);          }      };    $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);    };　　　　$http.get('api/get/slide_pics').success(function (response) {　　　　$scope.pics = response.data;　　});});

0 0