Javascript 将工厂服务的结果应用于范围控制器

我正在写一个上传服务。 到目前为止，上传效果良好。 但是我想用xhr回调更新控制器的作用域，以便显示相关信息和UI

我该怎么做？我认为工厂服务不是一个合适的地方，不能乱放控制器特定的东西

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...

---

尝试将作用域上的对象绑定到工厂中的返回值或对象。例如：

controller: function($scope, UploadService) {
         $scope.upload = function() {             
             UploadService.beginUpload($scope.files, options);
             $scope.uploadProgress = UploadService.onUploadProgress();
         };

然后在工厂里：

onUploadProgress: function(progress) {
      return "Some message";
    },

adminServices.factory('UploadService', [function() {
  //Create a UploadService Class

  function UploadService (scope) { //Constructor. Receive scope.      
    //Set Class public properties
    this.scope = scope;
    this.xhr = new XMLHttpRequest();
    //Write any initialisation code here. But reserve event handlers for the class user.
  }

  //Write the beginUpload function
  UploadService.prototype.beginUpload = function (files, options) {
    //Upload code goes here. Use this.xhr
  }

  //Write the onUploadProgress event handler function
  UploadService.prototype.onUploadProgress = function (callback) {
    var self = this;
    this.xhr.upload.addEventListener("progress", function (event) {
       //Here you got the event object.
       self.scope.$apply(function(){
         callback(event);//Execute callback passing through the event object.
         //Since we want to update the controller, this must happen inside a scope.$apply function 
       });
    }, false);
  }

  //Write other event handlers in the same way
  //...

  return UploadService;
}]);

然后在视图/html中：

<div>{{ uploadProgress }}</div>

然后：

---

请尝试在工厂中执行以下操作：

onUploadProgress: function(progress) {
      return "Some message";
    },

adminServices.factory('UploadService', [function() {
  //Create a UploadService Class

  function UploadService (scope) { //Constructor. Receive scope.      
    //Set Class public properties
    this.scope = scope;
    this.xhr = new XMLHttpRequest();
    //Write any initialisation code here. But reserve event handlers for the class user.
  }

  //Write the beginUpload function
  UploadService.prototype.beginUpload = function (files, options) {
    //Upload code goes here. Use this.xhr
  }

  //Write the onUploadProgress event handler function
  UploadService.prototype.onUploadProgress = function (callback) {
    var self = this;
    this.xhr.upload.addEventListener("progress", function (event) {
       //Here you got the event object.
       self.scope.$apply(function(){
         callback(event);//Execute callback passing through the event object.
         //Since we want to update the controller, this must happen inside a scope.$apply function 
       });
    }, false);
  }

  //Write other event handlers in the same way
  //...

  return UploadService;
}]);

现在，您可以在指令控制器内使用

UploadService

工厂，如下所示：

app.directive('fileUpload', function() {
  return {
    restrict: 'E',
    scope: {},
    template: '', //omitted for brevity
    controller: function($scope, UploadService) {
      //Create an UploadService object sending the current scope through the constructor.
      var uploadService = new UploadService($scope);

      //Add a progress event handler 
      uploadService.onUploadProgress(function(event){
        //Update scope here.
        if (event.lengthComputable) {
          $scope.uploadProgress = event.loaded / event.total;
        }
      });

      $scope.upload = function() {             
        uploadService.beginUpload($scope.files, options);
      };

---

希望能有帮助。干杯：）

这只会给我一个返回值。我希望在控制器的作用域中运行一个函数，以便调整作用域变量、输出通知等。