2015-09-16 24 views
2

我有一個角度函數,允許將文本文件放入文本區域,並將內容放入文本框中。問題是這在Firefox中不起作用。有任何想法嗎?在Firefox中不起作用的角度事件

PLunkr

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.text = ""; 
}) 
.directive('plkrFileDropZone', [function() { 
     return { 
      restrict: 'EA', 
      scope: {content:'='}, 
      link: function (scope, element, attrs) { 

     scope.content = "drop a .txt file here"; 

       var processDragOverOrEnter; 

       processDragOverOrEnter = function (event) { 
        if (event !== null) { 
         event.preventDefault(); 
        } 
        event.dataTransfer.effectAllowed = 'copy'; 
        return false; 
       }; 

       element.bind('dragover', processDragOverOrEnter); 
       element.bind('dragenter', processDragOverOrEnter); 
       element.bind('drop', handleDropEvent); 

     function insertText(loadedFile) { 

       scope.content = loadedFile.target.result; 
      scope.$apply(); 
     } 

       function handleDropEvent(event) { 

        if (event !== null) { 
         event.preventDefault(); 
        } 
        var reader = new FileReader(); 
        reader.onload = insertText; 
        reader.readAsText(event.dataTransfer.files[0]); 

       } 
      } 
     }; 
    }]); 
+0

應該使用'NG-model'上textarea的,不是要設置與文本'{{}}' – charlietfl

+0

@charlietfl改變這一點沒有區別。仍然在Chrome中工作,但不是在FireFox – KingKongFrog

回答

4

有一個簡單的解決方案刪除行

event.dataTransfer.effectAllowed = 'copy'; 
+0

現象!就是這樣!謝謝! – KingKongFrog

+0

重要提示:) – Buzinas

+0

僅供參考,如果您決定爲firefox設置'effectAllowed',則必須將其定義爲DragStart + DragEnter + DragOver事件處理程序才能正常工作。 –