Come aggiungere obliquo $ http listener di eventi

Question

Attualmente sto caricando un file in una direttiva angolare con ...

var fd = new FormData(); 
fd.append("uploadedFile", scope.uploadedFile); 

var xhr = new XMLHttpRequest(); 
xhr.upload.addEventListener("progress", uploadProgress, false); 
xhr.addEventListenter("load", uploadComplete, false); 
xhr.addEventListenter("error", uploadFailed, false); 
xhr.addEventListenter("abort", uploadCanceled, false); 
xhr.open("POST", scope.postUrl); 
scope.uploadInProgress = true; 
xhr.send(fd); 

function uploadProgress(e){ 
    scope.$apply(function(){ 
    if(e.lengthComputable){ 
     scope.progress = Math.round(e.loaded * 100/e.total); 
    } else { 
     scope.progress = 'unable to compute'; 
    } 
    }); 
} 

... 

questo frammento può essere riscritta utilizzando provider di $ http? non riesco a capire come mantenere i miei ascoltatori di eventi.

Answer 1

Risposta breve: presto sarete in grado di, ma non ancora esattamente come richiesto.

Ci sono alcune opzioni in discussione per creare la funzionalità - esponendo l'oggetto base xhr o consentendo di impostare i callback per i metodi.

Vedere https://github.com/angular/angular.js/issues/1934 in particolare: gli eventi di avanzamento non funzioneranno per il momento.

Nel frattempo, consiglierei di creare un oggetto manualmente e di utilizzare $apply per aggiornare l'ambito, proprio come voi.

Vedere questa domanda per ulteriori dettagli su come utilizzare un servizio per impostare almeno gli eventi di avvio e arresto che è possibile rilevare, ma senza fortuna sullo stato di avanzamento.

AngularJS: need to fire event every time an ajax call is started

Answer 2

Per ora è possibile utilizzare angular-file-upload direttiva che è semplice/leggero e supporta goccia di file e caricare il progresso. Esso utilizza uno spessore per essere caricato prima che il angolare per essere in grado di accedere all'oggetto XHR privata in angolare e allegare caricare listener di eventi ad esso.

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)" multiple> 
</div> 

JS:

//inject angular file upload directive. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    for (var i = 0; i < $files.length; i++) { 
     var $file = $files[i]; 
     $upload.upload({ 
     url: 'my/upload/url', 
     file: $file, 
     progress: function(evt){ 
      $scope.progress = parseInt(100.0 * evt.loaded/evt.total); 
     } 
     }).then(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    } 
}];