DropZone JSONオブジェクトをAngularJSに渡すにはどうすればいいですか？

Question

私のAngularアプリケーションでは、ファイルをアップロードするためにDropzoneをJQueryとともに使用しています。私は正常に私のサーバーにファイルをアップロードし、応答データを受け取ることができました。今、私はその応答データをJQueryからAngularJSコントローラに渡す必要があります。

これは私のドロップゾーンコードです：

<script type="text/javascript"> 
Dropzone.autoDiscover = false; 
$(document).ready(function() { 
    // Smart Wizard 
    $('#wizard').smartWizard({labelFinish:'Upload'}); 

     $('#file-dropzone').dropzone({ 
     url: "UploadData/", 
     maxFilesize: 1024000, 
     paramName: "uploadfile", 
     acceptedFiles: ".csv", 
     maxFiles: 1, 
     dictDefaultMessage: "Drop CSV file here", 
     maxThumbnailFilesize: 5, 
     dictMaxFilesExceeded: "You can only uplaod one file", 
     init: function() { 

      this.on("sending", function(file, xhr, formData){ 
       $(".busy-modal").show(); 

       formData.append("format", $("#format").val()); 

      }); 

      this.on('success', function(file, json) { 
       $(".busy-modal").hide(); 
       alert(JSON.stringify(json)); 
      }); 

      this.on('addedfile', function(file) { 

      }); 

     } 
    }); 
}); 

function ResetDropZone() 
{ 
    Dropzone.forElement("#file-dropzone").removeAllFiles(true); 
} 

</script> 

私はJSONでレスポンスデータを受け取る場所です。

this.on('success', function(file, json) { 
      $(".busy-modal").hide(); 
      alert(JSON.stringify(json)); 
     }); 

このjsonオブジェクトをAngularJSコントローラに渡す必要があります。どうしたらいいですか？

Answer 1

私は自分でそれをやります。方法は次のとおりです。

ng-modelとng-changeという属性を持つ隠しテキスト入力を追加しました。私のドロップゾーンの成功機能で

<input type="text" hidden id="fileResult" ng-model="fileResult" ng-change="fileResult_Changed()"/> 

私は、そのフィールドの値を変更し、私ng-changeイベントが発火なるように入力を引き起こしました。

this.on('success', function(file, json) { 
       $(".busy-modal").hide(); 
       //alert(JSON.stringify(json)); 

       $("#fileResult").val(JSON.stringify(json)); 
       $("#fileResult").trigger('input'); 
      }); 

そして、これは私が成功し

$scope.fileResult_Changed = function() 
{ 
    alert($scope.fileResult); 
} 

TA-DAデータを受け取った私のコントローラで私ng-changeイベントです！

Answer 2

dropzoneディレクティブ

angular.module('myApp').directive('dropzone', ['$cookie', function ($cookie) { 
    return { 
     restrict: 'C', 
     scope: { 
      fileList: '=?' 
     }, 
     link: function(scope, element, attrs) { 
      var config = { 
       url: '/upload', 
       maxFilesize: 16, 
       paramName: "file_content", 
       maxThumbnailFilesize: 10, 
       parallelUploads: 1, 
       autoProcessQueue: false, 
       headers: { 
        'X-CSRFToken': $cookies.get('csrftoken') 
       } 
      }; 
      var eventHandlers = { 
       'addedfile': function(file) { 
        var dz = this; 
        scope.$apply(function() { 
         scope.file = file; 
         if (dz.files[1]!=null) { 
          dz.removeFile(dz.files[0]); 
         } 
         scope.fileAdded = true; 
         scope.processDropzone(); 
        }); 
       }, 
       'success': function (file, response) { 
        // Do some thing on success 
        scope.$apply(function() { 
        scope.resetFile(file); 
        }; 
       }, 
       'error': function (file, reason) { 
        // Do something on error 
       } 
      }; 

      scope.dropzone = new Dropzone(element[0], config); 

      angular.forEach(eventHandlers, function(handler, event) { 
       scope.dropzone.on(event, handler); 
      }); 
      scope.processDropzone = function() { 
       scope.dropzone.processQueue(); 
      }; 
      scope.resetDropzone = function() { 
       scope.dropzone.removeAllFiles(); 
      }; 
      scope.resetFile = function(file) { 
       scope.dropzone.removeFile(file); 
      }; 
     } 
    } 
}]);