javascript - 错误消息 - 在使用 Angular 服务原型(prototype)时不是一个函数

Question

我正在为名为“UploadService”的上传构建一些可重用代码的 Angular 服务，该代码在下面的 Controller 中被调用 - 即使该服务已加载，我总是收到以下错误

`UploadService.upload is not a function at h.$scope.uploadImage...)`

我的上传服务(UploadService.js)

abcdServices.service('UploadService', function(ApiService, $http, $localStorage, $location, $timeout, $q, $rootScope, Upload) {

var UploadService = function() {
      this.upload_in_progress = false;
      this.attached_media = {
        photos: [],
        videos: []
      }
  };

  UploadService.prototype.upload = function(files) {
     console.log('get here');

  };

  return UploadService;

});

//调用服务的我的 Controller - 请注意我已将其添加到

    $scope.uploadImage = function(files, fileIndex, imageIndex) {
        console.log('existing upload image');
        console.log(files); // this shows an array in the console log as expected
        UploadService.prototype.upload(files);

    }

// Controller 在顶部加载了服务，我已将 UserService.js 文件包含在 index.php 中

abcdControllers.controller('PostController', function( $http, $rootScope, UploadService) {

Answer 1

原型(prototype)只是一种将实例成员添加到“类”的 JavaScript 方法。关键是，您必须直接使用 UploadService.upload() 而不是通过 prototype UploadService.prototype.upload() 因为 UploadService 不是对该类的引用，AngularJS 的注入(inject)器为您提供该类的实例，当您声明服务 UploadService 时，AngularJS 会注入(inject)对 new UploadService 的单例引用().

此外，您以错误的方式声明服务类，您的方法不会返回注入(inject)器的 UploadService 类，它只返回一个返回 UploadService 的函数，该函数永远不会公开。更好的方法是像下面的代码:

abcdServices.service('UploadService', function UploadService(ApiService, $http, $localStorage, $location, $timeout, $q, $rootScope, Upload) {    
    this.upload_in_progress = false;
    this.attached_media = {
        photos: [],
        videos: []
    };

    this.upload = function(files) {
        console.log('get here');    
    };    
});

或者您可以简单地将其更改为工厂提供程序并返回“类”的新实例:

abcdServices.factory('UploadService', function(ApiService, $http, $localStorage, $location, $timeout, $q, $rootScope, Upload) {    
  var UploadService = function() {
      this.upload_in_progress = false;
      this.attached_media = {
        photos: [],
        videos: []
      };
  };

  UploadService.prototype.upload = function(files) {
     console.log('get here');    
  };

  return new UploadService();    
});