Estou tentando criar o slidebox do ionic framework com dados retornados do banco e o slide não está aparecendo na tela. Já busquei a solução para isso em muitos lugares mas só encontrei que eu tenho que usar o update do ionic, porém o mesmo não funciona.
Os dados do banco são carregado e as tags dos slides são gerados no html, e a paginação ocorre normalmente, más não aparece nada na tela e o ionic joga um style na tag div.slider-slides com "width:0"
Agradeço qualquer ajuda que puderem me dar.
O meu código está dessa forma:
.controller('boletimController', function($scope, $ionicSlideBoxDelegate) {
$scope.pageClass = 'page-boletim';
$(".btnVoltar").css('display','inline-block');
$(".btnVoltar").click(function(event) {
document.location.href="#page-informativos";
});
$scope.previousSlide = function() {
$ionicSlideBoxDelegate.previous();
}
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
$scope.data = {};
$scope.data.slides = [];
$ionicSlideBoxDelegate.update();
$.post('URL', function(data, status){
var retorno = JSON.parse(data);
var txt = "";
$.each(retorno, function(index, value){
slideCounter++;
$scope.data.slides.push( {
img : "img/boletim.png",
title : "Slide " + slideCounter,
data : "Slide " + slideCounter + ' Content'
});
$ionicSlideBoxDelegate.update();
});
});
setTimeout(function(){
var atualPagina = 1;
$(".nPaginas .atual").html(atualPagina);
var totalPaginas = $($scope.data).size() + 1;
$(".nPaginas .total").html(totalPaginas);
$scope.slideHasChanged = function($index) {
var atualPagina = $index + 1;
$(".nPaginas .atual").html(atualPagina);
}
}, 100);
});
<ion-slide ng-repeat="item in data.slides | object2Array" class="slider-slide">
<ion-content>
<div class="imagem">
<img style="width: 100%; height: 250px;" src="{{item.img}}">
</div>
<div class="conteudo">
<h4>{{item.title}}</h4>
<p>{{item.data}}</p>
</div>
</ion-content>
</ion-slide>