Javascript 将Dropzone.js与angular集成

我正在从一些集成的DropboxJS作为角度指令进行工作。我不能让它工作。我已经拿起他的小提琴，用当前的CDN链接更新了它。你知道为什么指令代码从不触发吗？例如，如果我删除图像，它将转到/upload而不是/desiredupload，并且事件不会触发

小提琴：

此外，不幸的是，我无法在我的小提琴中复制-在我的本地代码中，我得到了这个错误：Object[Object Object]没有方法“dropzone”

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

$(element).dropzone({ 
    url: "/desiredupload",
    maxFilesize: 100,
    paramName: "uploadfile",
    maxThumbnailFilesize: 5,
    init: function() {
      this.on("addedfile", function(file) { 
       alert("Added file."); });
   }
});

用$（…）包装元素。在AngularJS中，它说所有DOM元素都是JQuery对象，但我认为您可能正在使用AngularJS的旧版本。

我就是这样做的：

.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>

---

任何旁边有

？

的

范围

变量都是可选的。唯一需要的字段是

action

，它将是发送帖子的URL。

我在读这篇文章时迷路了。你的问题过时了吗？我也不确定“查看更多：语法突出显示的更改”或“这现在已经实现”是什么意思。简言之，你到底在问什么？哦，天哪。。我试图为我的代码粘贴一些语法hightlite指令，但不小心粘贴了垃圾！哎呀。。。现在应该更有意义了

<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>