Làm thế nào để hiển thị thông báo chờ trong AngularJS trong khi đang tải dữ liệu?

Question

Tôi mới trong AngularJS và cố gắng tìm cách hiển thị thông báo chờ trong khi tải dữ liệu? Tôi có nghĩa là dữ liệu bắt đầu tải, hiển thị tin nhắn và loại bỏ nó khi tải dữ liệu được thực hiện.

Tôi đã tìm kiếm internet, nhưng đã không tìm thấy bất cứ điều gì tôi cần ...

Answer 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; 
}); 

Answer 2

Phụ thuộc từ nơi bạn đang tải dữ liệu. Một giải pháp tôi sử dụng là tạo ra một LoadingService

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(); 
     }); 
    }; 
}); 

Kể từ khi tôi chỉ có một nơi mà thông điệp đã được hiển thị tôi có thể sử dụng RootScope để xử lý này. Nếu bạn muốn có một tin nhắn tải nhiều lần bạn có thể viết một chỉ thị cũng để xử lý này như Codezilla đăng

Answer 3

Chỉnh sửa: không hoạt động trên phiên bản 1.3.0. Sử dụng yêu cầu/phản ứng đánh chặn.

Nếu bạn muốn nghe tất cả yêu cầu trên toàn cầu và hiển thị tiện ích tải bất cứ khi nào có yêu cầu đang chờ xử lý, bạn có thể đếm các yêu cầu bằng cách sử dụng request/response transformers. Bạn chỉ cần thêm bộ đếm và tăng yêu cầu mới và giảm yêu cầu đó khi trả lời. Tôi sử dụng một nhà cung cấp cho điều đó:

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

Và tương tự cho transformResponse. Sau đó, cùng một nhà cung cấp giữ thông tin về số lượng yêu cầu đang chờ xử lý và bạn có thể sử dụng chúng theo chỉ thị. Bạn có thể đọc (& sao chép/dán mã) toàn bộ bài đăng trên blog tại đây: http://www.kvetis.com/2014/01/angularjs-loading-widget.html Có bản trình diễn làm việc kèm theo.

Answer 4

Tôi không biết nếu là cách chính xác, nhưng tôi đặt trên mẫu của tôi

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

Answer 5

Tôi đã trả lời câu hỏi này trong this StackOverflow article, nhưng đây là một bản tóm tắt về những gì tôi đã làm.

Nếu bạn phong cách mã của bạn một cách chính xác, và chắc chắn rằng tất cả các cuộc gọi đến một đường chuyền dịch vụ web thông qua một đặc biệt factory chức năng, sau đó bạn có thể làm cho điều đó factory chức năng xử lý hiển thị và ẩn của bạn "Please Wait" popup.

Đây là factory chức năng mà tôi sử dụng để gọi tất cả các dịch vụ web GET của tôi:

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's 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); 
     }); 
    }; 
}); 

này sẽ được gọi như thế này:

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); 
} 

Đây là "Xin chờ" kiểm soát mà tôi sử dụng trên mỗi trang ..

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

... và mã của nó trông như thế này ...

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>' 
     } 
    }); 

Sử dụng cấu trúc này, bất kỳ bộ điều khiển góc của tôi có thể tải dữ liệu từ một dịch vụ web chỉ trong một vài dòng, và rời khỏi nhà máy để chăm sóc hiển thị/ẩn "Xin chờ" tin nhắn và để hiển thị bất kỳ lỗi xảy ra:

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

Tốt, này?