Как отображать сообщение ожидания в AngularJS при загрузке данных?

Ответ 1

<div ng-if="data.dataLoading">
    Loading...
</div>

JS

$scope.data.dataLoading = true;

return someService.getData().then(function (results) {                    
    ...
}).finally(function () {
    $scope.data.dataLoading = false;
});

Ответ 2

Зависит от того, где вы загружаете данные. Одним из решений, которое я использовал, было создание LoadService

app.factory('LoadingService', function($rootScope) {
    return {
        loading : function(message) {
             $rootScope.loadingMessage = message;
        },
        loaded : function() {
             $rootScope.loadingMessage = null;
        }
    }
}).controller('FooController', function($scope,$http,LoadingService) {

   $scope.loadSomeData = function() {
       LoadingService.loading('Data is loading');

       $http.get('/data').finally(function() {
            LoadingService.loaded();
       });
   };
});

Поскольку у меня было только одно место, где отображалось сообщение, я мог бы использовать RootScope для обработки этого. Если вы хотите иметь загрузочное сообщение несколько раз, вы могли бы написать директиву также для обработки такого кода, как отправленный Codezilla

Ответ 3

Изменить: не работает в версии 1.3.0. Используйте перехватчики запросов/ответов.

Если вы хотите прослушивать все запросы по всему миру и отображать виджет загрузки всякий раз, когда ожидающий запрос, вы можете подсчитать запросы, используя преобразователи запроса/ответа. Вы просто добавляете счетчик и увеличиваете новый запрос и уменьшаете его при ответе. Я использую для этого провайдера:

$httpProvider
  .defaults
  .transformRequest
  .push(function(data) {
      requestNotificationProvider
      .fireRequestStarted(data);
      return data;
});

И то же самое для transformResponse. Затем тот же провайдер хранит информацию о том, сколько запросов ожидает ответа, и вы можете использовать их в директиве. Вы можете прочитать (& copy/paste code) полную запись в блоге по этому поводу здесь: http://www.kvetis.com/2014/01/angularjs-loading-widget.html Там прилагается рабочая демонстрация.

Ответ 4

Я не знаю, правильно ли это, но я надел свой шаблон

 <img id="spinner" ng-src="images/spinner.gif" ng-if="!data" >
 <div ng-repeat="repo in repos | orderBy: repoSortOrder">...</div>

Ответ 5

Я ответил на этот вопрос в fooobar.com/info/249222/..., но здесь был краткий обзор того, что я сделал.

Если вы правильно нарисуете свой код и убедитесь, что все вызовы веб-службы проходят через одну функцию factory, то вы можете сделать этот дескриптор функции factory отображающим и скрывающим ваш " Подождите, пожалуйста.

Здесь функция factory, которую я использую для вызова всех моих веб-сервисов GET:

myApp.factory('httpGetFactory', function ($http, $q) {
    return function (scope, URL) {
        //  This Factory method calls a GET web service, and displays a modal error message if something goes wrong.
        scope.$broadcast('app-start-loading');          //  Show the "Please wait" popup

        return $http({
            url: URL,
            method: "GET",
            headers: { 'Content-Type': undefined }
        }).then(function (response) {
            scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup
            if (typeof response.data === 'object') {
                return response.data;
            } else {
                // invalid response
                return $q.reject(response.data);
            }
        }, function (errorResponse) {
            scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup

            //  The WCF Web Service returned an error.  
            //  Let display the HTTP Status Code, and any statusText which it returned.
            var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n";
            var HTTPErrorStatusText = errorResponse.statusText;

            var message = HTTPErrorNumber + HTTPErrorStatusText;

            BootstrapDialog.show({
                title: 'Error',
                message: message,
                buttons: [{
                    label: 'OK',
                    action: function (dialog) {
                        dialog.close();
                    },
                    draggable: true
                }]
            });

            return $q.reject(errorResponse.data);
        });
    };
});

Это вызвало бы так:

myApp.webServicesURL = "http://localhost:15021/Service1.svc";

var dsLoadAllEmployees = function (scope)
{
     //  Load all survey records, from our web server
     $scope.LoadingMessage = "Loading Employees data...";

     var URL = myApp.webServicesURL + "/loadAllEmployees";
     return httpGetFactory(scope, URL);
}

Здесь элемент управления "Подождите", который я использую на каждой странице.

<please-wait message="{{LoadingMessage}}" ></please-wait>

... и его код выглядит так...

myApp.directive('pleaseWait',  
    function ($parse) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                message: '@message'
            },
            link: function (scope, element, attrs) {
                scope.$on('app-start-loading', function () {
                    element.fadeIn(); 
                });
                scope.$on('app-finish-loading', function(){
                    element.animate({
                        top: "+=15px",
                        opacity: "0"
                    }, 500);
                });
            },
            template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>'
        }
    });

Используя эту структуру, любой из моих контроллеров Angular может загружать данные из веб-службы всего несколькими строками и оставлять factory для просмотра после отображения/скрытия сообщения "Подождите" и отображения любых ошибок которые происходят:

   $scope.LoadAllSurveys = function () {
        DataService.dsLoadAllSurveys($scope).then(function (response) {
            //  Success
            $scope.listOfSurveys = response.GetAllSurveysResult;
        });
   }

Ницца, эй?