AngularJS 如何在 $http 请求期间显示微调器

Question

当我第一次启动应用程序时，登录后我向服务器发出一个 http 请求并等待几秒钟的响应，同时服务器完成任务。在等待期间，我可以点击一些 link 并浏览应用程序。我想禁用它并在所有页面上制作一些加载 gif，但我不知道该怎么做。

我的控制器：

vm.starting = starting;    
function starting() {
    dataService.restartVersion().then(function (data) {

    });
}

我的服务

function restartVersion() {
    return $http.post('http://localhost/organization/restartVer', {
    }).then(function(response) {
        return response.data;
    });
}

如何在我的代码中实现某些功能以在所有页面上显示正在加载的 gif？

有帮助吗？

提前致谢

Answer 1

在控制器中，设置和重置标志。

function starting() {
    vm.starting = true;
    dataService.restartVersion()
      .then(function onSuccess(data) {
        vm.data = data;
    }).catch(function onReject(errorResponse) {
        console.log(errorResponse.status);
    }).finally(function() {
        vm.starting = false;
    });
};

在HTML中，使用标志：

<div ng-show="vm.starting">
    <img ng-src="spinnerURL" />
</div>

<div ng-hide="vm.starting">
    <p>{{vm.data}}</p>
</div>

vm.starting 在 XHR 启动时设置 true，在 XHR 完成时清除。

AngularJS 如何在 $http 请求期间显示微调器

AngularJS How to show spinner during $http request

loading

angularjs

angularjs-http