i need to use a ionic slide box to show some images in my application. I used ionic slide box it does not seem to work with a ng-repeat.
this is my html part
<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>
my controller
.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();
});
})
You have to use update() if you are using ng-repeat with slideboxes.
See here:
http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/
The newer version .rc4 of ionic updates the slide box on its own. Try updating your Ionic Lib.
This is my sample,the slide works,but when the delegate-handler updated,the parameter of the "does-contunue" can't work,I'm Still looking for a solution...
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>
controller:
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)
})
service:
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;
}
}
})