Показать загруженный прогресс bar ionic

Question

Я разрабатываю ионное приложение. Я использую плагин FileTransfer cordova для загрузки PDF-файла. Я могу загрузить файл во внутреннюю память, но не смог отобразить единый индикатор выполнения для downloaidng. Каков наилучший способ отображения прогресса для загрузки.

Контроллер

var url = 'http://someurl.com/api/pdf_download/' + id; 
// Android 
var targetPath = 'file:///storage/sdcard0/' + id + '.pdf'; 
var trustHosts = true; 
var options = {}; 
$cordovaFileTransfer.download(url, targetPath, options, trustHosts) 
    .then(function(result) { 
     console.log(result); 
    }, function() { 
     var alertPopup = $ionicPopup.alert({ 
      title: 'No internet access', 
      buttons: [{ 
       text: 'OK', 
       type: 'button-assertive' 
      }] 
     }); 
     alertPopup.then(function() {}); 

    }, function(progress) { 
     $timeout(function() { 
      $scope.downloadProgress = (progress.loaded/progress.total) * 100; 
     }) 
     console.log('progress--->', $scope.downloadProgress); 
    }); 

Answer 1

Я использовал cordovaToast плагин для этого feature.Here является примером для отображения PDF Скачать прогресс

HTML

<ion-view > 
    <div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" > 
     <progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress> 
    </div> 
    <ion-content> 
    </ion-content> 
</ion-view> 

css

.progress { 
    margin: 0 px; 
    height: 8 px; 
    background - color: #F1292B!important; 
    border - radius: 2 px; 
    box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset; 
} 

JS

if (window.cordova) { 
    var url = '{{base_url}}/pdf_download/' + id; 
    // Android 
    var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf'; 
    var trustHosts = true; 
    var options = {}; 
    $cordovaFileTransfer.download(url, targetPath, options, trustHosts) 
     .then(function(result) { 
      $cordovaToast 
       .show('File downloaded successfully..', 'short', 'center') 
       .then(function() { 
        // success 
       }, function() { 
        // error 
       }); 

      console.log(result); 
     }, function() { 
      var alertPopup = $ionicPopup.alert({ 
       title: 'No internet access', 
       buttons: [{ 
        text: 'OK', 
        type: 'button-assertive' 
       }] 
      }); 
      alertPopup.then(function() {}); 

     }, function(progress) { 
      var dnldpgs = progress.loaded.toString().substring(0, 2); 
      $scope.downloadProgress = parseInt(dnldpgs); 
     }); 
} 

Answer 2

Как Benka уже ответил на мой вопрос, вы должны использовать <progress> HTML элемент.

Полный ответ можно найти здесь ->https://stackoverflow.com/a/25553044/3671726