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

在我的Angular应用程序中，我使用Dropzone和JQuery来上传文件。我已成功地将文件上载到服务器并接收响应数据。现在我需要将该响应数据从JQuery传递到我的AngularJS控制器

这是我的dropzone代码：

<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对象传递给AngularJS控制器。我怎么做呢？

所以我得自己做。以下是方法：

我添加了一个带有

ng model

和

ng change

属性的隐藏文本输入

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

这是我在控制器中成功接收数据的

ng change

事件

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

---

塔达

创建

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

---

在dropzone提供正式指令之前，我一直避免使用自定义指令。dropzone的angularjs集成站点提供了创建自定义指令的链接。我认为他们永远不会提供

官方

（即通用的，足以满足所有用户情况）指令。指令是你生活的简化器，所以你自己写吧。

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

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