2

DropboxJS を angular ディレクティブとして統合したコードから作業しています。私はそれを働かせることができません。私は彼のフィドルを取り、現在の CDN リンクで更新しました。ディレクティブ コードが起動しない理由は何ですか? たとえば、画像をドロップすると、/desiredupload ではなく /upload に移動し、イベントは発生しません。

フィドル: 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をロードし、次に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 に答える