cách thêm góc $ http kiện nghe

Question

Tôi hiện đang tải lên một tập tin trong một chỉ thị góc với ...

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

... 

đoạn này có thể được refactored sử dụng nhà cung cấp $ http? tôi không thể tìm ra cách giữ người nghe sự kiện của mình.

Answer 1

Câu trả lời ngắn: chẳng bao lâu bạn sẽ có thể, nhưng chưa chính xác như bạn đã yêu cầu.

Có một vài tùy chọn được thảo luận để xây dựng trong chức năng - hiển thị đối tượng cơ sở xhr hoặc cho phép đặt lại các hàm gọi cho các phương thức.

Xem https://github.com/angular/angular.js/issues/1934 cụ thể - các sự kiện tiến trình sẽ không hoạt động vào lúc này.

Trong thời gian chờ đợi, tôi khuyên bạn nên tạo đối tượng theo cách thủ công và sử dụng $apply để cập nhật phạm vi của bạn, giống như bạn có.

Xem câu hỏi này để biết thêm chi tiết về cách sử dụng dịch vụ để thiết lập ít nhất bắt đầu và dừng sự kiện bạn có thể bắt - nhưng không có may mắn về tiến trình.

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

Answer 2

Đối với bây giờ bạn có thể sử dụng angular-file-upload chỉ thị đó là đơn giản/trọng lượng nhẹ và hỗ trợ tập tin thả và tải tiến bộ. Nó sử dụng một shim được nạp trước góc để có thể truy cập đối tượng riêng XHR trong góc và đính kèm trình nghe sự kiện tải lên vào nó.

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