2

我正在使用一些将 DropboxJS 集成为角度指令的代码。我无法让它工作。我拿了他的小提琴并用当前的 CDN 链接更新了它。知道为什么指令代码永远不会触发吗？例如，如果我放下图像，它将转到 /upload 而不是 /desiredupload 并且事件不会触发。

小提琴：http: //jsfiddle.net/cyberwombat/3tDqZ//1/

angular.module('dropZone', [])
.directive('dropZone', function() {
  return function(scope, element, attrs) {
    element.dropzone({ 
        url: "/desiredupload",
        maxFilesize: 100,
        paramName: "uploadfile",
        maxThumbnailFilesize: 5,
        init: function() {
          this.on("addedfile", function(file) { 
           alert("Added file."); });
       }
    });
  }
});

angular.module('dropZone', [])
.controller('dropZoneCtrl', function() {});

此外，不幸的是，我无法在我的小提琴中复制 - 在我的本地代码上我收到此错误：对象 [对象对象] 没有方法 'dropzone'

我正在加载 dropzone，然后是 angular（尝试了另一种方式），然后是我的应用程序、指令等。所以我认为顺序不是问题。Dropzone 成功检测到表单并使其成为 DnD，但我的指令元素似乎没有 dropz

4

2 回答 2

2

我就是这样做的：

.directive('dropZone', function () {
    return {
        scope: {
            action: "@",
            autoProcess: "=?",
            callBack: "&?",
            dataMax: "=?",
            mimetypes: "=?",
            message: "@?",
        },
        link: function (scope, element, attrs) {
            console.log("Creating dropzone");

            // Autoprocess the form
            if (scope.autoProcess != null && scope.autoProcess == "false") {
                scope.autoProcess = false;
            } else {
                scope.autoProcess = true;
            }

            // Max file size
            if (scope.dataMax == null) {
                scope.dataMax = Dropzone.prototype.defaultOptions.maxFilesize;
            } else {
                scope.dataMax = parseInt(scope.dataMax);
            }

            // Message for the uploading
            if (scope.message == null) {
                scope.message = Dropzone.prototype.defaultOptions.dictDefaultMessage;
            }

            element.dropzone({
                url: scope.action,
                maxFilesize: scope.dataMax,
                paramName: "file",
                acceptedFiles: scope.mimetypes,
                maxThumbnailFilesize: scope.dataMax,
                dictDefaultMessage: scope.message,
                autoProcessQueue: scope.autoProcess,
                success: function (file, response) {
                    if (scope.callBack != null) {
                        scope.callBack({response: response});
                    }
                }
            });
        }
    }
})

一个示例用法是：

<div action="/file/upload/" class="dropzone" drop-zone
     call-back="myCallBackMethod(response)"
     data-max="5"
     auto-process="false"
     message="Drop file here or click to select"
     mimetypes=".doc,.docx,.pages,.pdf,.odt"
     id="file-dropzone">
</div>

任何旁边scope有 的变量都是可选的。?唯一需要的字段是action，这将是发送帖子的 URL。

于 2015-08-11T01:09:52.623 回答
-1 
$(element).dropzone({ 
    url: "/desiredupload",
    maxFilesize: 100,
    paramName: "uploadfile",
    maxThumbnailFilesize: 5,
    init: function() {
      this.on("addedfile", function(file) { 
       alert("Added file."); });
   }
});

用 $(...) 包裹元素。在 AngularJS 中，它说所有 DOM 元素都是 JQuery 对象，但我认为您可能使用的是旧版本的 AngularJS。

于 2013-09-25T17:53:59.980 回答