Problem with slidebox and ng-repeat in Ionic framework

Question

I’m trying to create the slidebox of the Ionic framework with data returned from the database and the slide is not appearing on the screen. I’ve looked for the solution to this in many places but only found that I have to use the Ionic update, however the same does not work.

The database data is loaded and the slide tags are generated in html, and paging occurs normally, but nothing appears on the screen and Ionic plays a style in the div.slider-slide tag with "width:0"

I appreciate any help you can give me.

My code is that way:

.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>

Answer 1

After more research I found the solution to my problem.

The solution for me was to put the following code at the end of the controller code:

setTimeout(function(){

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

}, 1000);

The same code could also be made that way:

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

However had reports that this second code does not work on android. I did not test to confirm this.

Follow full controller and view code

.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>