Question

在我的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中收到响应数据的地方。

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

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

2 个答案: