Dropzone.js를 각도로 통합하기

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() {}); 

또한

불행하게도 내가 바이올린에 복제 할 수 없습니다 - 내 로컬 코드에 내가이 오류 : 개체 [개체 개체하기] 내가있는 방법 'DROPZONE'

이 없습니다 dropzone을로드하고 다음 각도 (다른 방법을 시도) 다음 내 애플 리케이션, 지시 등 .. 그래서 나는 순서가 문제라고 생각하지 않습니다. DROPZONE 성공적으로 양식을 감지하고 드래그 & 드롭을한다하지만 내 지시어 요소는 $ (...)와 dropz

Answer 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를 사용하고 있다고 생각합니다.

Answer 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이됩니다.