ondragstart HTMLタグ内のAngularJS関数を呼び出す

Question

ondragstart HTMLタグ内でAngularJS関数を呼び出そうとしていますが、私の関数が定義されていないというエラーが表示されます。私のコード：

HTML

<div class="ng-cloak" data-ng-app="myApp"> 
    <div data-ng-controller="Controller" data-ng-init="init()"> 
     <div class="aligned-list"> 
      <span data-ng-repeat="x in items_data"> 
       <a> 
        <figure class="icon32x32 border-5 round-corners left"> 
         <img data-ng-attr-id="{{x.name}}" draggable="true" ondragstart="drag(event)" data-ng-src="http://ddragon.leagueoflegends.com/cdn/6.24.1/img/item/{{x.image.full}}" alt=""/> 
        </figure> 
       </a> 
      </span> 
     </div>        
    </div> 
</div> 

JS

var app = angular.module("myApp", []); 
app.controller("Controller", function($scope) { 

    $scope.drag = function(ev) { 
     ev.dataTransfer.setData("text", ev.target.id); 
    } 

}); 

私はそれが通常のHTML内でその関数を呼び出すことが可能である、angularJS controllerの内側にする機能を必要としますタグ？

Answer 1

コードでは、ネイティブイベントハンドラ（ondragstart）を使用して、角度関数にバインドしようとしています。それは動作しません。

角度1.xはデフォルトでondragstartイベントをサポートしていません。ここで

は独自のドラッグ可能ディレクティブを作成する方法についての良い記事です：https://parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

記事はここに投稿するには長すぎます。しかし、この記事の要点は、dragstart,dragover,dragenter,dragleaveおよびdropのイベントリスナーを追加する独自の指示文を作成することです。