在 http 请求上加载 Angular Spinner答案

【问题标题】：Load Angular Spinner on http request在 http 请求上加载 Angular Spinner
【发布时间】：2015-02-13 03:18:46
【问题描述】：

我正在尝试在我的项目中使用 Angular Spin Kit 在每个 http GET、PUT、POST 和 DELETE 方法上加载微调器。这是 Angular Spin Kit 的小提琴。

<circle-spinner></circle-spinner>

如何将此微调器与我的控制器代码连接，以便在调用 http 调用时我可以在我的视图中加载此微调器。谢谢

【问题讨论】：

您能否使用您的代码或您迄今为止尝试过的东西添加一个指向 JS fiddle 或 Plnkr 的链接？
我还没试过。我想知道如何将它与控制器中的 GET 请求联系起来
可以使用$http服务拦截器，见stackoverflow.com/questions/15033195/…
查看我的factory，我想它会帮助你

标签： javascript angularjs spinner jquery-spinner

【解决方案1】：

您可以使用$scope 变量来检测ajax 请求的进度。根据该变量，您可以显示或隐藏微调器

 $scope.sendAjax = function() {
    $scope.prograssing = true;                // show spinner
    $http.get('data.json').then(function() {
      //sucess
      $scope.prograssing = false;          // hide spinner when success ajax
    } , function() {
      //error
      $scope.prograssing = false;        // hide spinner when unsuccessful ajax
    });
 }

这是工作的plunker

【讨论】：

【解决方案2】：

首先，您需要按照这些说明在您的项目中安装angular-spinkit。

其次，please see this Plnkr 看看我是如何设法使用 angular spinkit 进行 GET 调用的。

这些是主要步骤：

将您的 <circle-spinner></circle-spinner> 指令插入代码中，但使用 ng-show 使其不可见，如下所示：

<circle-spinner ng-show="showSpinner"></circle-spinner>

showSpinner 是一个 $scope 变量，我们将其初始化为 false，因为我们不希望在调用 $http 之前显示旋转的圆圈。
使用 Angular $http 服务进行 GET 调用。使用一个函数来做到这一点。当您调用该函数时，第一件事是将$scope.showSpinner 变量设置为true，以便您的微调器可见。然后你拨打$http 电话。
下一步是处理 GET 响应。调用完成后（您有成功或错误选项），您必须告诉$scope.showSpinner 变量变为假，这意味着来自<circle-spinner> 指令的ng-show 将变为假，因此不再显示圆圈.

长话短说，您展示了一个不可见的旋转圆圈，您拨打了$http 使其可见；当响应返回时，旋转的圆圈不再可见。

【讨论】：