I am writing an UploadService. The upload so far works fine. But I'd like to update the scope of the controller with the xhr callbacks, in order to display relevant information and UI.
How would I do that? I think the factory service is not the right place to clutter with controller specific stuff.
adminServices.factory('UploadService', [function() {
return {
beginUpload: function(files, options) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", this.onUploadProgress, false);
xhr.addEventListener("load", this.onUploadComplete, false);
xhr.addEventListener("error", this.onUploadFailed, false);
xhr.addEventListener("abort", this.onUploadCanceled, false);
},
onUploadProgress: function(progress) {
console.log("upload progress"); //HERE I CAN'T UPDATE the CONTROLLER's SCOPE
},
onUploadComplete: function(result) {
console.log("upload complete"); //NOR HERE
},
app.directive('fileUpload', function() {
return {
restrict: 'E',
scope: {},
template: '', //omitted for brevity
controller: function($scope, UploadService) {
$scope.upload = function() {
UploadService.beginUpload($scope.files, options);
};
//HERE I'D LIKE TO HAVE NOTIFICATIONS OF THE onXYZ methods...