AngularJS從服務中返回一個值

我按照這個教程爲離子應用程序的圖像上傳。AngularJS從服務中返回一個值

https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

它的工作原理，但我有一個問題：文件上傳，我返回從服務器新的文件名。我必須將其保存到控制器中的變量中。我無法將服務中的值保存到控制器。

這裏是我的控制器，服務和視圖

指令&服務

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]) 

.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(data){ 
      alert(data); 
     }) 
     .error(function(){ 
     }); 
    } 
}])

控制器

.controller('MyCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
    $scope.uploadBtn1 = false; 
    $scope.uploadSpin1 = true; 
    $scope.uploadFile = function(){ 
     var file = $scope.myFile; 
     $scope.uploadBtn1 = true; 
     $scope.uploadSpin1 = false; 
     console.log('file is ' + JSON.stringify(file)); 
     var uploadUrl = "http://example.com/app/upload.php"; 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
    }; 

}]);

HTML

<input type="file" file-model="myFile"/> 
<button type="button" ng-click="uploadFile()" 
     ng-hide="uploadBtn1" class="ng-hide">upload me</button> 
<ion-spinner icon="ios-small" ng-hide="uploadSpin1" class="ng-hide"></ion-spinner>

我阿爾斯o在上傳開始時添加了加載微調器，並且我想在上傳結束時將其隱藏。

謝謝

來源

2015-05-08 Soundhar Raj

我已經對有問題的示例做了一些更改。該服務現在作爲返回承諾的工廠實施。

然後，您可以在控制器中等待承諾返回，然後處理控制器中的數據。

codepen example

var uploadFile = fileUpload.uploadFileToUrl(file, uploadUrl); 

uploadFile.error(function(data){ 
    alert('data returned - handle me', data); 
});

在我的例子，我已經改變了返回的數據字符串並傳遞迴給控制器，然後提醒該數據的用戶。

來源

2015-05-08 13:39:34 Sam

感謝您的回覆。我必須將uploadFile.error替換爲成功？ –

是的，確切地說，您需要將.success和.error鏈接在一起以匹配在服務中完成的方式。 – Sam

另請注意，對服務的更改（現在使用工廠創建）現在返回$ http – Sam

AngularJS從服務中返回一個值

回答

相關問題