如何在数据加载时在AngularJS中显示等待消息？

我在AngularJS新的，并试图找到如何显示在数据装载等候消息的方式吗？我的意思是数据开始加载，显示消息并在数据加载完成后将其删除。如何在数据加载时在AngularJS中显示等待消息？

我在网上搜索，但没有发现任何东西，我需要......

2013-08-21 tesicg

如果您想显示Web服务调用的加载指示符，还可以拦截http调用。关于如何实现这样一个拦截器有一些博客文章。一个好的是这样的：http://codingsmackdown.tv/blog/2013/01/02/using-response-interceptors-to-show-and-hide-a-loading-widget/ – Stephan

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

$scope.data.dataLoading = true; 

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

来源

2013-08-21 13:16:36 AlwaysALearner

这种方法非常合适。谢谢。 – tesicg

问题：即使服务器返回空列表或空值，它也会显示“正在加载...”消息。 –

@AlexeyF你说得对。我已经修改了答案。 – AlwaysALearner

从正在加载数据，其中依赖。我使用的一个解决方案是创建一个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(); 
     }); 
    }; 
});

因为我只有一个地方，正在显示的消息，我可以用RootScope来处理这个问题。如果你想有一个加载消息多次，你可以写一个指令还来处理这个喜欢Codezilla贴

来源

2013-08-21 13:34:14

编辑：在1.3.0版本不起作用。使用请求/响应拦截器。

如果你想在全球范围内听取所有请求，并显示加载插件只要有一个请求挂起，您可以使用request/response transformers算请求。你只需添加一个计数器并增加一个新的请求，并在响应时减少它。我使用的是供应商：

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

与同为transformResponse。然后，同一个提供者持有关于有多少请求正在等待的信息，并且您可以在指令中使用它们。你可以阅读（&复制/粘贴代码）一个完整的博客文章在这里： http://www.kvetis.com/2014/01/angularjs-loading-widget.html有一个工作演示的连接。

来源

2014-01-16 16:51:43 kvetis

我不知道是否是正确的做法，但我把我的模板

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

来源

2015-04-24 13:50:21 cesarlarsson

我在this StackOverflow article回答了这个问题，但这里是什么，我做了一个概括。

如果你正确风格你的代码，并确保Web服务通所有来电通过一个特别factory功能，那么你就可以使factory功能手柄显示和隐藏您的“请等待”弹出。

这里的factory功能，我用它来叫我所有的GET Web服务：

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

这会得到这样调用：

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

采用这种结构，我的任何角度控制器可以在短短的几行网络服务加载数据，并离开工厂展示照顾/隐藏“请稍候”的信息，并显示任何错误发生：

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

不错，嘿？

来源

2016-09-01 19:49:42

如何在数据加载时在AngularJS中显示等待消息？

回答

相关问题