When html page loads first time ion-slide-box not works

Question

My ion-slide-box not works when the page loads. If i refresh the page then its works properly. I'm refer some links but can't solve this solve this issue. Please help me on this.

My html code.

  <ion-view view-title="" hide-back-button="true">
  <ion-content class="padding" style="top: 48px;" ng-show="viewEntered">
    <ion-item ng-show="emptyCategory">
      <h2 style="text-align:center; font-weight:bold; white-space:normal;">No category found.</h2>
    </ion-item>
    <div class="row" ng-repeat="categoryDetail in categoryDetailList">
       <div class="col card" style="margin-bottom:5px;margin-top:5px;" ng-if="categoryDetail.token==1">
         <div class="row no-padding">
          <div class="col col-33 no-padding"><img ng-src={{categoryDetail.image}} height="110px;" width="100%;"> </div>
          <div class="col col-67 no-padding-top">
            <div class="row responsive-md no-padding-top" style="margin:0;">
              <div class="col no-padding" style="margin: 0;">{{categoryDetail.title}}</div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-call"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.phoneNo}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-mail"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.email}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-location"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.location_name}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-ios-world-outline"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.website}} </span></div>
            </div>
          </div>
        </div>
        <div ng-if="categoryDetail.paidStatus == 1" class="col" style="margin: 0;text-align: right;border-top:1px solid #AFAFAF;">
          <button class="button button-small icon-right ion-android-arrow-dropright-circle button-dark" ng-click="getcategoryDeail(categoryDetail.id)">
            View Details
          </button>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 15px;">  
      <ion-slide-box does-continue="true" auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged($index)">
        <ion-slide ng-repeat="advertise in advertiseDetailList" >
          <div ng-class="getRandomColor(advertise.profileId)" ui-sref="app.categoryDetail({detailsId: advertise.profileId})">
            <img ng-src="{{advertise.image}}" width="100%" height="125px" />
          </div>
        </ion-slide>
      </ion-slide-box>
   </div>
  </ion-content>
</ion-view>

My controller code :

.controller('CategoryIdDetailController', function($timeout, $scope, $http, $state, baseUrl, $ionicLoading, $stateParams, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

  $scope.$on("$ionicView.enter", function () { 
    $scope.viewEntered = true; 
  });
  $scope.$on("$ionicView.beforeLeave", function () { 
    $scope.viewEntered = false; 
  });

  $ionicLoading.show({
    template: '<ion-spinner icon="spiral"></ion-spinner>'
  });

  $scope.advertiseDetailList = []; 

  $http({
    method : "GET",
    url : baseUrl+"category_id="+$stateParams.categoryId+"&methodName=category.detailList"
  }).then(function mySucces(response) {
    if(response.data.responseMsg.resultLength == 0) {
      $ionicLoading.hide();
      $scope.categoryDetailList = response.data.responseMsg.category;
      $scope.emptyCategory = true;
    }  else  {
      $ionicLoading.hide();

      $scope.categoryDetailList = response.data.responseMsg.category;
      //$scope.advertiseDetailList = response.data.responseMsg.advertise;
      $scope.$watch('learnSpeed', function (newValue, oldValue) {
        $ionicSlideBoxDelegate.update();
      });

      angular.forEach(response.data.responseMsg.advertise, function(value, key) {
        $scope.advertiseDetailList.push({'image': value.image});
      })

      $scope.emptyCategory = false;
    }
  }); 

  $scope.getcategoryDeail = function(detailsId) {
    $state.go('app.categoryDetail',{detailsId:detailsId});
  }

})

Server response :

"responseMsg": {

    -
    "0": {
        "id": 1,
        "imgContent": "images/1.jpeg",
        "profileId": 9,
        "image": "http://localhost/helloKasaragodApi/static/images/1.jpeg"
    },
    -
    "1": {
        "id": 2,
        "imgContent": "images/2.jpeg",
        "profileId": 16,
        "image": "http://localhost/helloKasaragodApi/static/images/2.jpeg"
    },
    -
    "2": {
        "id": 3,
        "imgContent": "images/3.jpeg",
        "profileId": 33,
        "image": "http://localhost/helloKasaragodApi/static/images/3.jpeg"
    }

},

score 0 · Answer 1 · answered Jan 24 '17 at 14:35

0

After you get the data from the server and add it to the variable you want use $scope.$apply(); to update the $scope variables on the page.

answered Jan 24 '17 at 14:35

Ângelo Martins

41
1
1
7

Do you have the cache disabled on the $stateProvider of your app? – Ângelo Martins Jan 25 '17 at 09:20
No. app,js code .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'templates/menu.html', controller: 'AppCtrl' }) .state('app.home', { url: '/home', views: { 'menuContent': { templateUrl: 'templates/home.html', controller: 'HomeCtrl' } } }) ...... so on – Sam Jan 25 '17 at 09:47
Try to add "cache: false" to the state. – Ângelo Martins Jan 25 '17 at 16:50
Thanks for the reply. okay i will try using cache state false – Sam Jan 30 '17 at 04:46

score 0 · Answer 2 · answered Oct 05 '17 at 07:19

You can use ion-slides like following way:

<ion-slide ng-repeat="artist in data.random_artists">
<div class="box">
    {{artist.title}}
</div>
</ion-slide>

.controller('HomeCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate, DataHandler) {
$scope.data.random_artists = DataHandler.GetRandomArtists(3);
  setTimeout(function(){
      $ionicSlideBoxDelegate.update();
  },5000);
}

Ref: https://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/15

When html page loads first time ion-slide-box not works

2 Answers2