javascript - 错误 : error:unpr Unknown Provider injected service in controller

Question

我不知道我做错了什么，我所有的其他服务都没有问题。我想做的是上传一张照片。本来service部分的代码是在controller里面的，因为不想再写一整套代码去修完照片再上传(这个service是干什么的吧？)，所以重构成了一个service。 p>

Controller :

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

首先，服务不能依赖作用域，所以你不能注入(inject) $scope(可以注入(inject) $rootScope)。您不能从 Controller 实现中复制和粘贴代码并粘贴到服务中。工厂服务需要创建服务对象，然后附加函数，最后返回

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