Angularjs 如何添加$http事件侦听器

我目前正在上传一个文件在一个角度指令与

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

 ...

---

是否可以使用$http provider重构此代码段？我不知道如何留住我的活动听众。

简短回答：很快你就能做到，但还不能完全按照你的要求

在构建功能时，有几个选项正在讨论中——公开基本的

xhr

对象，或者允许为方法设置回调

具体请参见-进度事件暂时不起作用

同时，我建议手动创建一个对象，并使用

$apply

更新您的范围，就像您所做的那样

有关如何使用服务设置至少可以捕获的开始和停止事件的更多详细信息，请参见此问题，但进展不顺利

目前，您可以使用指令，该指令简单/轻量级，支持文件拖放和上载过程。 它使用在angular之前加载的垫片，以便能够访问angular中的XHR私有对象并将上载事件侦听器附加到该对象

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

JS:

//插入角度文件上载指令。
angularFileUpload模块（'myApp'，['angularFileUpload']）；
var MyCtrl=['$scope'，'$upload'，函数（$scope，$upload）{
$scope.onFileSelect=函数（$files）{
对于（变量i=0；i<$files.length；i++）{
var$file=$files[i]；
$upload.upload({
url:'my/upload/url'，
文件：$file，
进展：功能（evt）{
$scope.progress=parseInt（100.0*evt.loaded/evt.total）；
}
}).then（函数（数据、状态、标题、配置）{
//文件已成功上载
控制台日志（数据）；
}); 
}
}
}];

Angular 1.5.4中的功能：

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