Page view break after load the page. Basically I called rest API on this page controller and based on $scope.data I was init a ng-loop on the page. When I entered this page looks like its break the view, if I refresh the page then its looks good. See the attache screen sort. I am using ionic v1.
First load view:
Page refresh view:
Controller:
.controller('ExamExeCtrl', function ($scope, $http, $state, $ionicHistory, $ionicSlideBoxDelegate,$timeout, $interval) {
$scope.questions = [];
$scope.loadQuestions = function () {
$scope.showLoading("Loading...");
$http.get('js/question.json').then(function (response) {
$scope.hideLoading();
$scope.questions = response.data;
});
}
$scope.loadQuestions();
});
HTML:
<ion-view view-title="Test">
<ion-content class="container no-padding">
<div class="page-content exam-exe">
<div class="panel">
<div class="panel-body">
<div class="exam-exe__title">Your test name here {{timespent}}</div>
<div class="exam-exe__stats">
<span class="exam-exe__stats--count">7/30</span>
<span class="exam-exe__stats--timer">04:30</span>
<span class="exam-exe__stats--skip">SKIP</span>
</div>
<div class="exam-exe__pb">
<span style="width:30%"></span>
</div>
<div class="exam-exe__slider">
<ion-slide-box ng-init="disableSwipe()" class="exam-slider" does-continue="false" show-pager="false">
<ion-slide ng-repeat="(qIndex, qValue) in questions">
<div class="exam-exe__slider___slider-item">
<div class="exam-exe__slider___slider-item____question">
<h3>{{qValue.title}}</h3>
</div>
<div class="exam-exe__slider___slider-item____options">
<button class="button button-block button-positive" ng-repeat="o in qValue.options" ng-click="checkAnswer(o.isCorrect, qValue.id)">{{o.text}}{{o.isCorrect}}</button>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
Any solutions?