I'm experiencing an issue where the page loads square by square when I scroll, which looks like this: https://i.sstatic.net/yHNLx.jpg
Here is the code snippet:
categoryList.html
<ion-header-bar align-title="center" class="bar-stable">
<h1 class="title">Best Wishes App</h1>
</ion-header-bar>
<ion-content class="padding" overflow-scroll="true">
<div class="list">
<div class="card responsive-card" ng-repeat="item in data">
<a href="#/sublist/{{item.id}}">
<div class="item item-image">
<img ng-src="{{item.image}}" alt="item image">
</div>
<div class="item item-divider">
{{item.categoryTitle}}
</div>
</a>
</div>
</div>
</ion-content>
app.js
angular.module('starter', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('list', {
url: '/',
templateUrl: 'template/categoryList.html',
controller: 'ListController'
})
$urlRouterProvider.otherwise("/");
})
.controller('ListController', ['$scope', '$http', '$state', '$ionicHistory', '$rootScope', function ($scope, $http, $state, $ionicHistory, $rootScope) {
console.log($rootScope.data);
$rootScope.$watch('data',function(){
$scope.data = $rootScope.data;
})
}])
Since I'm new to Angular, please provide a detailed explanation in your answer. :/
I'm using version 1.7 of the ionic-framework
and my IDE is Visual Studio which leverages cordova CLI in the background to package and run the app.