2014-09-30 126 views
1

我不知道我做錯了什麼,我所有的其他服務工作沒有問題。我試圖做的是上傳一張照片。最初代碼的服務部分是在控制器內部的,我將它重構爲一項服務,因爲我不想在編輯照片後再編寫另一整套代碼來上傳(這是什麼服務是正確的?)錯誤:錯誤:未知未知提供者在控制器注入服務

控制器:

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

+0

您不能將$ scope注入工廠函數。正確定義工廠(參見Chandermani的回答)。 – pixelbits 2014-09-30 07:06:42

回答

2

首先,服務不能承擔範圍的依賴,所以你不能注入$範圍(可注入$ rootScope)。您不能複製和粘貼控制器實施中的代碼並粘貼到服務中。 工廠服務需要創建服務對象,然後附加函數並最終返​​回

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

感謝您的意見,我已經明白了! – 2014-10-01 08:32:44

1

你不能將$ 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; 

     } 

    } 

}]); 
相關問題