wie Angular $ http Ereignis-Listener

Question

Ich bin derzeit eine Datei in einem Winkel Richtlinie mit ...

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'; 
    } 
    }); 
} 

... 

Kann diese Schnipsel Refactoring mit $ http Anbieter Hochladen hinzufügen? Ich kann nicht herausfinden, wie ich meine Event-Listener halten kann.

Answer 1

Kurze Antwort: Bald werden Sie können, aber noch nicht genau, wie Sie angefordert haben.

Es gibt einige Optionen, die diskutiert werden, um die Funktionalität zu erstellen - das Basisobjekt xhr verfügbar zu machen oder Rückrufe für die Methoden zu erlauben.

Siehe https://github.com/angular/angular.js/issues/1934 speziell - Fortschritt Ereignisse werden im Moment nicht funktionieren.

In der Zwischenzeit würde ich empfehlen, ein Objekt manuell zu erstellen und $apply zu verwenden, um Ihren Bereich zu aktualisieren, genau wie Sie.

In dieser Frage finden Sie weitere Informationen zur Verwendung eines Diensts zum Einrichten und Starten von Ereignissen, die Sie erfassen können - aber kein Glück beim Fortschritt.

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

Answer 2

jetzt für Sie angular-file-upload Direktive verwenden kann, die Datei-Drop einfach/leicht und unterstützt und Fortschritt laden. Es wird ein Shim verwendet, das vor dem Angular geladen wird, um auf das private XHR-Objekt in angular zugreifen zu können und den Upload-Ereignis-Listener an es anzuhängen.

<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); 
     }); 
    } 
    } 
}];