Ion-slide-box not rendering images

ionic-v1
1

I am pulling some images and trying to display within an . The codes are as follows:

<ion-slide-box show-pager="true" ng-if="showSlide">                        
    <ion-slide ng-repeat="i in SlideImages">
      <div class="box"><img ng-src="{{i}}" width="100%"></div>
    </ion-slide>
</ion-slide-box>

The corresponding code in controller is :

function cacheImages () {
      $ImageCacheFactory.Cache ($scope.pageData.images.image)
        .then (function () {
             //console.log ("Images done loading!");
              $scope.showSlide   = true;
              $scope.showLoader  = false;
              $scope.SlideImages = $scope.pageData.images.image;
              $ionicSlideBoxDelegate.update();
              $ionicScrollDelegate.resize();
   });

}

Problem:
The slide box shows correctly on most Android devices… EXCEPTING Samsung Galaxy Core Prime
(detail of the phone is : http://www.gsmarena.com/samsung_galaxy_core_prime-6716.php)

The Slide box is not at all rendering on iOS and while debugging on Safari with X-Code - the slide box does not show up. The images after loading - pushes the content below but not the images.

** I used ‘https://gist.github.com/IgorMinar/863acd413e3925bf282c’ for building iOS version of the app.

Please help me to solve this issue.

2

try to set $scope.showSlide after you set $scope.SlideImages. I do not know if this is only a thing with the pasted code here, but do not make spaces within a function call

$ImageCacheFactory.Cache ($scope.pageData.images.image)
    .then (function () {

better:

$ImageCacheFactory.Cache($scope.pageData.images.image)
    .then(function () {

Is this phone the only one with Android 4.4.4 ???

3

Thank you so much Bengt Weiße.

As regards the space after .then - it was added by the editor … see as attached.

image
Screenshot 2015-11-09 12.37.36.png865×226 12.7 KB

I have tested with Android 4.1.2 - its OK

I have tested with Android 5.0 - it is OK…

4

Maybe a javascript error?

connect your device with your pc and use chrome remote debugging.
strange, it is working with android 4.1.2 and not 4.4.4 - what sorcery is this

5

True … that is what is bugging me a lot…

I am implementing the fix you suggested… and create a build version …

The code is now modified as :

function cacheImages () {
    $ImageCacheFactory.Cache ($scope.pageData.images.image)
        .then(function () {
           //console.log ("Images done loading");
           $scope.SlideImages = $scope.pageData.images.image;
           $scope.showLoader  = false;
           $scope.showSlide   = true;
           $ionicSlideBoxDelegate.update();
           $ionicScrollDelegate.resize();
     });
}

ALSO: Do you think… I should allow some time (say a 500 ms with a $timeout before rendering the slide box on the DOM ??

6

this should not be necessary.

7

Ok… testing …will post the results soon.

8

Hi Bengt Weiße,

I just tested with the debug build … the error still remains and it is not showing up…

what next ?

9

the issue is still not solved … and I could not find an answer …

@mhartington @bengtler

10

Hello @DigitalIQ , @bengtler
Also I had this problem. I try everything on css but not solved. This solution may not be satisfy but it doesn’t effect efficiency of code.
create ng-if in ion-slide-box and create
$scope.showslide = false;
at beginning of code.
After you send http get or post request in response part set
$scope.showslider = true;

Solution is changing ng-if status of ion-slide-box. You can change after get request or you can try with toggle swtich to see the effect.

html code:


<li class="item item-toggle">
            Show Hide Slider
            <label class="toggle toggle-assertive">
              <input ng-model="showslider" type="checkbox">
              <div class="track">
                <div class="handle"></div>
              </div>
            </label>
        </li>
 <div id="slider">
            <ion-slide-box ng-if="showslider" auto-play="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
                <ion-slide ng-repeat="slider1 in sliderlar">
                    <div class="box">
                        <img ng-src="{{fotoUrl(slider1.PhotoUrl)}}" style="width: 100% !important;" />
                    </div>
                </ion-slide>
            </ion-slide-box>
        </div>

Js Code:

$scope.showslider = false;
    /* slide listeleme */
    $scope.sliderlar = [];
    $scope.slider = function() {
        var w = [$scope.Token];
        var myDataPromise1 = servisjson.getData(
            urlolus(servissayfasi, "sliderlistele", w)
        );
        myDataPromise1.then(function(result) {
            $scope.sliderlar = result;
               $scope.showslider = true;
        });
    };

    $scope.slider();

   $scope.fotoUrl = function(adres) {
        var photourl = resimLinki + "/" + adres;
        return photourl;
    }