自分のイベントリスナーをAngularJSに登録するには？

Question

自分のイベントリスナーをAngularJSアプリケーションに登録するにはどうすればよいですか？

具体的には、Drag and Drop（DND）リスナーを登録しようとしています。そのため、ビューの新しい場所に何かがドラッグ＆ドロップされると、AngularJSはビジネスロジックを再計算し、モデルとビューを更新します。

Answer 1

ディレクティブでのイベント処理とDOM操作を非表示にすることは、かなり多くの角度の方法です。スコープをコールします。$イベントが発生したときに適用されて、angleを表示してビューを更新します。

あなたは in this sampleのようにjqueryの-UIを使用して検討するかもしれない

（私はangular-uiグループと連携angular wiki of examples を見て、あなたが有用見つけるかもしれないシンプルなイベントラッパーがあります。

Answer 2

イベントリスナーを追加リンク方法で行われますあなたがjquery-uiの.draggable（）と.droppable（）を使いたいのであれば、elemのパラメータがlinkの関数であることを知ることができるでしょう。下の各ディレクティブは実際にはjQueryオブジェクトですから、elem.draggable()に電話して、そこで何をするかを指定してください。

ここ

は、ディレクティブと角度ではdragstartを結合する例を示します。ここ

app.directive('draggableThing', function(){ 
    return { 
     restrict: 'A', //attribute only 
     link: function(scope, elem, attr, ctrl) { 
     elem.bind('dragstart', function(e) { 
      //do something here. 
     }); 
     } 
    }; 
}); 

は、あなたがそれを使用したい方法です。

<div draggable-thing>This is draggable.</div> 

divや何かにAngularを使用してドロップする例を示します。

app.directive('droppableArea', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      elem.bind('drop', function(e) { 
       /* do something here */ 
      }); 
     } 
    }; 
}); 

これはどのように使用するのですか。

<div droppable-area>Drop stuff here</div> 

私は役立つことを願っています。

Answer 3

Benの素晴らしい解決策ですが、originalEventと元の要素にアクセスする必要があることに注意してください。 Mozillaのドキュメントによると、二つの条件https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

1. ドラッグを満たしていなければならないことはそうディレクティブは、この

   app.directive('draggableThing', function() { 
       return function(scope, element, attr) { 
        var pureJsElement = element[0]; 
        pureJsElement.draggable = true; 
        element.bind('dragstart', function(event) { 
         event.originalEvent.dataTransfer.setData('text/plain', 
              'This text may be dragged'); 
        //do something here. 
        }); 
       } 
   }); 
   

   ステップの例により、良好なステップのように見えるかもしれませんはdragstart

のリスナー

真でありますここをクリック http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html