Question

我正在使用将DropboxJS集成为角度指令的code。我无法让它发挥作用。我已经拿走了他的小提琴并用当前的CDN链接更新了它。知道为什么指令代码永远不会触发？例如，如果我删除图像，它将转到/上传而不是/ 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() {});

此外，不幸的是我不能在我的小提琴中复制 - 在我的本地代码中我收到此错误：对象[object Object]没有方法＆＃39; dropzone＆＃39;

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

Answer 1

我就是这样做的：

.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，它是发送帖子的网址。

Answer 2

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

使用$（...）换行元素。在AngularJS中，它表示所有DOM元素都是JQuery对象，但我认为您可能正在使用旧版本的AngularJS。

将Dropzone.js与角度集成

2 个答案: