come utilizzare la versione angolare del caricamento di file jquery?

Question

ecco come io uso di file jquery angolare caricare

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

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

}) 

tutto quello che ho fatto è stato impostare le scope.options, cambiare il controller, e tutto ciò solo funziona magicamente

impostare il caricamento di file jquery sembra abbastanza facile, ma c'è qualcosa che davvero mi confonde

come posso chiamare la funzione di callback del caricamento del file jQuery. per esempio, se i file caricati con successo, voglio aggiornare l'interfaccia utente chiamando la funzione fileuploaddone, mi confondono perché non c'è nessun file aggiunto nel mio controller.

Sono nuovo di angularJS, ti prego, aiutami a capire il flusso di lavoro di file di jquery angolare caricare

Answer 1

il blueimp.fileupload utilizza gli eventi che vengono sparati tramite $ emettono per notificare ambiti di genitore:

   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(); 
       } 
      }) 

ciò significa che si può semplicemente aggiungere un listener di eventi in uno dei controller ambito padre, ad esempio:

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

È inoltre possibile eseguire l'override del handleResponse di default funzione nella tua fase di configurazione, ad esempio:

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; 
     } 
    };  
}]);