angular.bind（）關於 '下降' 事件偵聽器無法正常運行

Question

Plunker demonstrating code

我與指令集dragAndDrop作爲屬性一個<div>元件：

<div ng-class="divClass" drag-and-drop>Drop files here</div> 

（作爲側，並不太重要的注意事項，ng級不表現如預期，但這是一個separate issue） 我想用戶將文件從桌面拖放到div。儘管如此，我使用angular.bind()來檢測放置事件。當然，一旦他們下降，我打電話e.stopPropagation()和e.preventDefault()，但頁面繼續，不管重定向頁面。我做錯了什麼會阻止上述兩種方法的執行？

dragAndDrop指令：

directive('dragAndDrop', function() { 
    return { 
    restrict: 'A', 
    link: function($scope, elem, attr) { 
     elem.bind('dragenter', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     // still can't get this one to behave: 
     // https://stackoverflow.com/q/15419839/740318 
     $scope.divClass = 'on-drag-enter'; 
     }); 
     elem.bind('dragleave', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $scope.divClass = ''; 
     }); 
     elem.bind('drop', function(e) { 
     var droppedFiles = e.dataTransfer.files; 
     // It's as though the following two methods never occur 
     e.stopPropagation(); 
     e.preventDefault(); 

     if (droppedFiles.length > 0) { 
      for (var i=0,ii=droppedFiles.length;i<ii;i++) { 
      $scope.files.push(droppedFiles[i]); 
      } 
     } 
     }); 
    } 
    }; 
}); 

Answer 1

角不知道什麼時候你已經註冊的事件處理程序被觸發，所以你需要通知角度，你已經改變了範圍的變量。你用$apply函數來做到這一點。

$scope.$apply(function() { 
    $scope.divClass = 'on-drag-enter'; 
}); 

當談到滴處理你是正確的 - var droppedFiles = e.dataTransfer.files;之後的語句永遠不會因爲運行時錯誤語句會導致

e是一個jQuery的事件運行，而dataTransfer是實際DOM事件的屬性。要解決此問題，您需要通過originalEvent屬性訪問原始事件。

var droppedFiles = e.originalEvent.dataTransfer.files; 

只需要

e.originalEvent如果您以前角度包括jQuery的，但因爲你沒有這樣做，在你的plnkr，該解決方案是無效的，我道歉更新爲了那個原因。

好像你需要選擇在由preventDefault of the dragover event拖放支持（這也許可以在其他事件要做的事 - haven't測試。）

elem.bind('dragover', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 

Updated plnkr。