如何使用jquery文件上傳角形版？

Question

這裏是我如何使用jQuery的角上傳文件

var album = angular.module('album', ['restangular', 'blueimp.fileupload']), 

.controller('somecontroller',function($scope,){ 
    $scope.options = { 
     something 
    } 

}) 

我所做的只是設置scope.options，改變控制器，一切都神奇地工作

設置jQuery的文件上傳似乎很容易，但有些東西真的讓我困惑

我該如何調用jquery文件上傳的回調函數。例如，如果文件上傳成功，我想通過調用fileuploaddone函數來更新ui，這讓我感到困惑，因爲我的控制器中沒有添加文件。

我是新來angularJS，請幫我理解的角度jQuery的文件的工作流程上傳

Answer 1

的blueimp.fileupload使用了通過$觸發的事件發出通知父範圍：

   on([ 
       'fileuploadadd', 
       'fileuploadsubmit', 
       'fileuploadsend', 
       'fileuploaddone', 
       'fileuploadfail', 
       'fileuploadalways', 
       'fileuploadprogress', 
       'fileuploadprogressall', 
       'fileuploadstart', 
       'fileuploadstop', 
       'fileuploadchange', 
       'fileuploadpaste', 
       'fileuploaddrop', 
       'fileuploaddragover', 
       'fileuploadchunksend', 
       'fileuploadchunkdone', 
       'fileuploadchunkfail', 
       'fileuploadchunkalways', 
       'fileuploadprocessstart', 
       'fileuploadprocess', 
       'fileuploadprocessdone', 
       'fileuploadprocessfail', 
       'fileuploadprocessalways', 
       'fileuploadprocessstop' 
      ].join(' '), function (e, data) { 
       if ($scope.$emit(e.type, data).defaultPrevented) { 
        e.preventDefault(); 
       } 
      }) 

這意味着，你可以簡單地在父範圍控制器之一添加事件偵聽器，如：

$scope.$on('fileuploadprocessdone', function(event, files){ 
    $.each(files, function (index, file) { 
     //do what you want 
    }); 
}); 

您也可以覆蓋默認用handleResponse功能在你的配置階段，例如：

angular.module('myApp', ['blueimp.fileupload']). 
.config(['fileUploadProvider', function (fileUploadProvider){ 
    fileUploadProvider.defaults.handleResponse = function (e,data){ 
     var files = data.result && data.result.files; 
     if (files) { 
      data.scope().replace(data.files, files); 
      // do what you want... 
     } else if (data.errorThrown || data.textStatus === 'error') { 
      data.files[0].error = data.errorThrown || 
      data.textStatus; 
     } 
    };  
}]);