CODEWITHSUNDEEP
javascripthtmlangularjs
rob
rob

Reputation: 301

Angular JS loading issue

I am trying to get the following Angular-Spinner working in my project:

I am trying to get it working with http.get calls. So far I have:

in controllers:

$scope.loading = true;
$http.get('js/data/test.json').success(function(results){
$scope.section = results.section;
$scope.loading = false;

});

In the view:

<span us-spinner="{radius:15, width:4, length: 8}" ng-show="loading"></span>
<div ng-repeat="post in section" class="inner"></div>

Currently the loading shows very fast, I want to know is this the correct way to use it? How can I delay it slightly before all the data loads and a spinner is shown. Any ideas?

Upvotes: 0

Views: 198

Answers (1)

cdslijngard
cdslijngard

Reputation: 196

You could try to add a timeout:

$scope.loading = true;

setTimeout(function () {
    $http.get('js/data/test.json').success(function(results){
        $scope.section = results.section;
        $scope.loading = false;
    }
}, 5000);

This will wait 5 seconds before trying to retrieve the data from the JSON file.

EDIT: use the $timeout service from Angular. Don't forget to include it in your controller! (Thank you Walfrat)

$timeout(function () {
    $http.get('js/data/test.json').success(function(results){
        $scope.section = results.section;
        $scope.loading = false;
    }
}, 5000);

Upvotes: 1

Related Questions