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。