Как показать счетчик, пока результат не вернется с сервера

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"/> 

ЯШ:

$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()