Question

在我的应用中使用Angular1。当用户将某个文件拖动到特定区域（div）时，需要触发一个函数。我尝试过ondragenter，但在这种情况下无法访问控制器中定义的函数。很难，ondragenter中的警报功能有效。 Angular1中是否有替代onDragEnter？或者，我如何为同一个创建新指令？

Answer 1

在我正在工作的项目中，我有一个拖放到文件输入的示例。也许它可以帮到你。在这种情况下，我将Excel工作表导入到我的应用程序中的ui-grid。但你可以调用任何指令。

在HTML中，这是我的输入：

<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]]);

指令代码本身对您的情况并不重要，但请注意我在输入中引用 fileread 作为属性。

对于一个工作示例，请参阅此Plunker（它是我的指令的简化版本，但它是我使用的基础）：

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

希望它有所帮助。

onDragEnter事件在Angular中不起作用

1 个答案: