錯誤：錯誤：unpr未知提供者在控制器中注入服務

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工廠：傳遞$ 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;

       }

   }

}]);