Search code examples
angularjstemplatessliderionic-frameworkangular-ui

Ionic slider not showing content initially


When i load a template on click of button using $state.go() slider embedded in template not displaying its content.

When i rotated my device then it start showing the slides. Please sugggest what i am missing in this code snippet of template.

    <ion-slide-box on-slide-changed="" show-pager="true">
        <ion-slide ng-repeat="placementStep in placementSteps">
          <div class="list card"> 

              <div class="item-divider">
              <div class="row">
                  <div class="col">
                    <h1 class="title">{{placementStep.stepName}}</h1>  
                  </div>
                  <div class="col">
                  <button class="button icon ion-chevron-right button-positive button-small right"  ng-if="$index!=placementSteps.length-1&& placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,0)"></button>

                    <button class="button icon ion-chevron-left button-positive button-small  right"  ng-if="$index!=0 && placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,1)"></button> 

                  </div>

                </div>
              </div>
              <ion-list show-reorder="data.showReorder" can-swipe="false" ng-class="has-header">

                <ion-item ng-repeat="student in placementStep.studentsForStep">
                <div class="row">
                  <div class="left checkbox">
                      <input type="checkbox" ng-checked="student.checked==true" ng-model="student.checked">

                  </div>
                  <div class="col vertical-center">
                   {{student.first_name}} 
                  </div>

                </div> 

            </ion-item>
            </ion-list>  
         </div>
        </ion-slide>
    </ion-slide-box>
</ion-content>


Solution

  • I used delegate handle to update the slide box after loading data. It worked.

    $ionicSlideBoxDelegate.$getByHandle('placementStepSlideBox').update();

    Where "placmentStepSlideBox" is the delegate handle name.