2016-08-17 19 views
0

アプリケーションでAngular1を使用しています。ユーザーがファイルを特定の領域(div)にドラッグしたときに関数をトリガする必要があります。私はondragenterを試しましたが、この場合コントローラに定義された関数にアクセスすることはできません。タフ、ondragenterの警告機能が働きます。 onDragEnterのAngular1に代わるものはありますか?あるいは、同じものに対して新しいディレクティブを作成するにはどうすればよいですか?onDragEnterイベントがAngularで動作しない

答えて

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/

はそれがお役に立てば幸いです。

関連する問題