onDragEnter 이벤트가 각도로 작동하지 않습니다.

Question

내 앱에서 Angular1을 사용 중입니다. 사용자가 파일을 특정 영역 (div)으로 드래그 할 때 함수를 트리거해야합니다. ondragenter를 시도했지만이 경우 컨트롤러에 정의 된 함수에 액세스 할 수 없습니다. 힘든, ondragenter의 경고 기능이 작동합니다. onDragEnter에 Angular1을 대체 할 수 있습니까? 또는 같은 지시어를 새로 만들려면 어떻게해야합니까?

Answer 1

프로젝트에서 나는 파일 입력에 끌어서 놓기의 예가 있습니다. 어쩌면 당신을 도울 수 있습니다. 이 경우, Excel 워크 시트를 내 응용 프로그램의 ui-grid로 가져옵니다. 그러나 당신은 어떤 지침이라도 부를 수 있습니다.

<label class="btn btn-default btn-file"> 
     Upload file 
    <input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" /> 
</label> 

이 입력 후라는 지시어의 첫 번째 절반 (지침의 나머지는 그냥 내 응용 프로그램의 수입 논리입니다) :

.directive("fileread", [function() { 
return { 
    scope: { 
     opts: '=' 
    }, 
    link: function($scope, $elm, $attrs) { 
     $elm.on('change', function(changeEvent) { 

      var reader = new FileReader(); 
      //var evt = evt; 
      reader.onload = function(evt) { 
       $scope.$apply(function() { 

        var myEvent = ((window.event)?(event):(evt)); 
        //get the Element which this event is all about 

        var Element = ((window.event)?(event.srcElement):(evt.currentTarget)); 

        var data = Element.result; 

        var workbook = XLSX.read(data, { 
         type: 'binary' 
        }); 

        var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); 

되는 HTML에서

이 내 입력

지시문 코드 자체는 중요하지 않지만 입력 내용의 특성으로 fileread을 참조합니다. 작업 예를 들어

는 (그것은 내 지시어의 단순화 된 버전입니다,하지만 내가 사용하는 기본입니다)이 Plunker를 참조하십시오

http://embed.plnkr.co/rYC3nd7undqJz2mr8Old/

는 도움이되기를 바랍니다.