Question

我不知道我做错了什么，我的所有其他服务都没有问题。我正在尝试做的是上传照片。最初代码的服务部分是在控制器内部，我重构它是一个服务，因为我不想在编辑照片后再写一组代码再次上传（这是什么服务的权利？）

控制器：

app.controller('UploadCtrl', ['$scope', '$upload','UploadService',
function($scope, $upload,UploadService) {
    $scope.uploads = [];
    var photos = $scope.$parent.photos;
    for (i = 0; i < 3; i++) {
        $scope.uploads[i] = {
            id: i+1,
            showLink: photos[i].showLink,
            showProg: false,
            progress: 0,
            photoUrl: photos[i].dataUrl
        }
    }
}
]);

工厂：

app.factory('UploadService',['$upload', '$scope', function($upload,$scope){

$scope.onFileSelect = function($files, $_upload) {
    for (var i = 0; i < $files.length; i++) {
        var $file = $files[i];

        //set thumbnail
        $scope.dataUrl = null;
        if ($file.type.indexOf('image') > -1) {
            var fileReader = new FileReader();
            fileReader.readAsDataURL($file)

            var loadFile = function(fileReader) {

                fileReader.onload = function(e) {
                    // console.log(e.target.result);
                    $_upload.dataUrl = e.target.result;
                    $_upload.showLink = false;
                    $_upload.showProg = true;
                }
            }(fileReader);
        }

$scope.upload = $upload.upload({
            url: 'upload_picture',
            method: 'POST',
            file: $file,
            fileFormDataName: 'provider[photo_' + $_upload.id + ']'
        }).progress(function(event) {

            $_upload.progress = parseInt(100.0 * event.loaded / event.total);
            // console.log('percent: ' + $_upload.progress);
        }).success(function(data, status, headers, config) {
            // file is uploaded successfully
            // console.log("success")
            // console.log(data);
            $_upload.showProg = false;
        }).error(function(data, status, headers, config) {
            console.log("error");
        });
    }
};

var UploadService = $scope.onFileSelect($files,$upload);
return UploadService;   
}]);

基于此： https://github.com/danialfarid/angular-file-upload

Answer 1

首先，服务不能依赖于范围，因此您不能注入$ scope（可以注入$ rootScope）。您无法从控制器实现中复制和粘贴代码并粘贴到服务中。工厂服务需要创建服务对象，然后附加功能并最后返回

app.factory('UploadService',['$upload', function($upload){
   var service = {};
   service.upload = $upload.upload({
      ...
   });
   return service;
}]);

Answer 2

您无法将$ scope注入工厂/服务。您可以使用$ rootScope，但您可能应该从工厂返回一个承诺。

这是另一个类似的问题。 Angularjs factory: errors on passing $scope,$route,$http?

app.factory('UploadService',['$upload', '$q', function($upload, $q){

   var deferred = $q.defer();

   return{

       upload: function(uploadConfig){

           $upload.upload(uploadConfig)
               .success(function(data){
                   deferred.resolve(data);
               }).error(function(error){
                   deferred.reject(error);
               });

           return deferred.promise;

       }

   }

}]);

错误：错误：unpr未知提供者在控制器中注入服务

2 个答案: