如何将 DropZone JSON 对象传递给 AngularJS？

Question

在我的 Angular 应用程序中，我使用带有 JQuery 的 Dropzone 来上传文件。我成功地将文件上传到我的服务器并接收响应数据。现在我需要将该响应数据从 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()"/>

在我的 dropzone 成功函数中，我更改了该字段的值并触发了输入，这样我的 ng-change 事件就会触发。

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

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

这是我在控制器中成功接收数据的ng-change 事件

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

哒哒！

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