2015-01-22 3 views
1

Мне нужно использовать ионный слайдер для отображения некоторых изображений в моем приложении. Я использовал ионный слайдер, он, похоже, не работает с ng-repeat.ионный слайдер не работает с ng-repeat

это мой HTML часть

<ion-view title="Promotions" ng-controller="PromotionsCtrl"> 


    <ion-content class="has-header" scroll="true" padding="true"> 
     <ion-slide-box> 

       <ion-slide ng-repeat="obj in promotions"> 
         <img ng-src= {{obj.img}}> 

       </ion-slide> 

     </ion-slide-box> 
    </ion-content> 
</ion-view> 

мой контроллер

.controller('PromotionsCtrl', function($scope, $http, $window, $ionicSlideBoxDelegate,$interval) { 





      $http.get( 'http://******.com/B*****/service2.php?q=promotions', { cache: true}) 
      .then(function(res){ 

        $scope.promotions = res.data['top']; 


        $ionicSlideBoxDelegate.update(); 
        }); 
        }) 

ответ

6

Вы должны использовать обновления(), если вы используете нг-повтор с slideboxes.

Смотрите здесь:

http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/

+0

Да, действительно, $ ionicSlideBoxDelegate.update(); может использоваться после получения данных для ng-repeat. – karma

0

новая версия .rc4 ионных обновлений коробке слайдов самостоятельно. Попробуйте обновить Ionic Lib.

+0

Можете ли вы рассказать о том, как обновить библиотеку, пожалуйста? – Cody

+0

'npm установка -g ионный' должен делать. – isherwood

+0

вам придется изменить номер версии в файле 'bower.json' и снова запустить' bower install'. –

1

Это мой образец, слайд работает, но когда делегат-обработчик обновляется, параметр «не-contunue» не может работать, я все еще ищу решение ...

HTML:

<ion-slide-box on-slide-changed="slideHasChanged($index)" does-continue="true" auto-play="true" delegate-handle="image-viewer" style="height:30%;"> 
     <ion-slide ng-repeat="slide in slideList"> 
      <div class="box" style="background-image: url('{{slide.url}}');background-size:100% 100%;></div> 
    </ion-slide-box> 

контроллер:

angular.module("myApp.controllers", ["myApp.services"]) 
.controller("myController", function ($scope, $ionicSlideBoxDelegate, myService,$timeout) { 
    $timeout(function(){ 
     var slideList = myService.getSlides(); 
     $scope.slideList = slideList; 
     $ionicSlideBoxDelegate.$getByHandle('image-viewer').update(); 
    },2000) 
}) 

обслуживание:

angular.module("myApp.services", []) 
.factory("myService", function() { 
    return{ 
     getSlides: function() { 
      var slideList = new Array(); 
      slideList.push("imgs/a.jpg"); 
      slideList.push("imgs/b.jpg"); 
      slideList.push("imgs/c.jpg"); 
      return slideList; 
     } 
    } 
}) 
0

Как сказал @Karan, update является вызовом сам по себе. Но все еще есть проблемы. Как указано в issue, вы можете отключить слайдер, если данные не готовы. Тогда все будет хорошо.

Смежные вопросы