应用从工厂服务结果的范围控制器

Question

我写的UploadService。上传至今工作正常。但我想更新与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...

Answer 1

尝试做在工厂的情况如下：

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

希望能帮助到你。干杯:)

Answer 2

尝试在范围对象绑定到你的工厂返回值或对象。例如：

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

然后在工厂：

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

然后，在观看/ HTML：

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

或者试试：

return {
    theProgress: "",
    beginUpload: function(files, options) {...},
    onUploadProgress: function(progress) {
      theProgress = "some value";
    }
}

然后：

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