如何显示微调器直到结果从服务器返回

Question

我正在使用 ng-file-upload 将多个文件上传到服务器。服务器会在一段时间后（约 10 秒）做出响应。这次我想在屏幕上显示一个微调器。

我目前展示的是这样的微调器

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>

但它永久存在。我怎样才能让它只出现在服务器返回响应之前的时间？

我的上传代码如下：

        Upload.upload({
            url: 'http://localhost:8080/myapp',
            data: {
                files: files
            }
        }).then(function (response) {
            $timeout(function () {
                $scope.result = response.data;
                $scope.text = response.data.text;
                $scope.notext = response.data.notext;
            });
        }, function (response) {
            if (response.status > 0) {
                $scope.errorMsg = response.status + ': ' + response.data;
            }
        }, function (evt) {
            $scope.progress = 
                Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });

Answer 1

如果我没猜错的话...

html:

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif" ng-hide="loaderHidden"/>

js:

$scope.loaderHidden = true;

function upload() {

   $scope.loaderHidden = false;
   Upload.upload({
            url: 'http://localhost:8080/myapp',
            data: {
                files: files
            }
        }).then(function (response) {
            $timeout(function () {
                $scope.loaderHidden = true;

                $scope.result = response.data;
                $scope.text = response.data.text;
                $scope.notext = response.data.notext;
            });
        }, function (response) {
            if (response.status > 0) {
                $scope.errorMsg = response.status + ': ' + response.data;
            }
        }, function (evt) {
            $scope.progress = 
                Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
}

然后直接调用 upload()

如何显示微调器直到结果从服务器返回

How to show a spinner until the result is back from the server

angularjs

ng-file-upload