comment ajouter Angulaire $http écouteurs d'événement

Je suis en train de télécharger un fichier dans angulaire de la directive avec...

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

 ...

Cet extrait peut être reconstruit à l'aide de $http fournisseur? je ne peux pas comprendre comment garder mes écouteurs d'événement.

InformationsquelleAutor Kirby | 2013-04-15
  1. 3

    Réponse courte: vous allez bientôt être en mesure de, mais pas encore exactement comme vous l'avez demandé.

    Il ya quelques options en cours de discussion pour construire dans la fonctionnalité exposer à la base xhr objet, ou de permettre à des rappels pour les méthodes.

    Voir https://github.com/angular/angular.js/issues/1934 spécifiquement événements de progression de ne pas travailler pour le moment.

    En attendant, je recommande la création d'un objet manuellement et à l'aide $apply de mettre à jour votre portée, tout comme vous.

    Voir cette question pour plus de détails sur la façon d'utiliser un service mis en place au moins de démarrer et d'arrêter les événements, vous pouvez les attraper, mais pas de chance sur le progrès.

    AngularJS: besoin de feu à chaque fois qu'un appel ajax est commencé

    InformationsquelleAutor Alex Osborn
  2. 1

    Pour maintenant, vous pouvez utiliser angulaire de téléchargement de fichier directive, qui est simple/légère et prend en charge le fichier de chute et l'avancement du téléchargement.
    Il utilise une cale d'être chargé avant le anguleux pour être en mesure d'accéder à XHR objet privé angulaire et joindre télécharger écouteur d'événement pour elle.

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