4

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>

2
  • 1
    Nunca usei o ionic, mas tenta colocar o style="width: 100%; height: 250px;" dentro da <div class="imagem" aqui>... 11/08/2015 às 13:53
  • Eu tentei isso agora e não funcionou tbm. Mas obrigado pela ajuda!!
    – user5103
    11/08/2015 às 14:03

1 Resposta 1

1

Depois de mais pesquisas encontrei a solução para o meu problema.

A solução para mim foi colocar o seguinte código ao final do código do controller:

setTimeout(function(){

    var event = document.createEvent( 'Event' );
    event.initEvent( 'resize', true, true );
    window.dispatchEvent( event );

}, 1000);

O mesmo código também poderia ser feito dessa forma:

window.dispatchEvent(new Event('resize'));

Porém teve relatos de que este segundo código não funciona em android. Não cheguei a testar para confirmar isso.

Segue o código completo do controller e da view

.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);
  
  setTimeout(function(){
    var event = document.createEvent( 'Event' );
    event.initEvent( 'resize', true, true );
    window.dispatchEvent( event );
  }, 1000);
});
<ion-slide ng-repeat="item in data.slides" 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .