поставете спинер, докато $http.get извлича данни от RESTful API в angularjs

Извличам данни с тази функция в моя контролер:

var fetchStoreItems = function () {
    return $http.get('/enterprises/_store').then(function (response) {
        $scope.items = response.data;
    }, function (errResponse) {
        console.error("Error while fetching data")
    })
};

Работи добре и достатъчно бързо. Но какво ще стане, ако има много неща за донасяне?! Искам да сложа спинер, докато се извличат данни.

Как мога да направя това?


javascript angularjs angularjs-http
person Rodrigue    schedule 02.12.2014    source източник

Отговори (2)


arrow_upward
3
arrow_downward

Във вашия контролер,

var fetchStoreItems = function () {
    $scope.loading = true;            //define a `$scope` variable; show loading image when ajax starts
    return $http.get('/enterprises/_store').then(function (response) {
        $scope.items = response.data;
        $scope.loading = false;       //hide loading image  when ajax successfully completes
    }, function (errResponse) {
        console.error("Error while fetching data");
        $scope.loading = false;      //hide loading image  when ajax error
    })
};

<img src="pathToLoadingImage" ng-show="loading" />  // show the loading image according to `$scope.loading`
person Kalhan.Toress    schedule 02.12.2014

arrow_upward
1
arrow_downward

Ако искате да го използвате за някои от останалите извиквания на API, отговорът на kalhano работи добре. Въпреки това, ако искате spinner за всички ваши ъглови http повиквания, можете да помислите за използването на прихващач.

Моля, проверете тази връзка за това: Обяснени са документите за Http повиквания с прихващачи

person Kop4lyf    schedule 02.12.2014