38

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

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

4

3 に答える 3

47

イベントリスナーの追加は、ディレクティブのリンクメソッドで行われます。以下に、基本的なディレクティブの例をいくつか示します。ただし、jquery-uiの.draggable（）および.droppable（）を使用する場合は、以下の各ディレクティブelemのlink関数のパラメーターが実際にはjQueryオブジェクトであることがわかります。だから、あなたは電話elem.draggable()をして、そこでやろうとしていることをすることができます。

Angularで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>

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

于 2012-10-14T03:07:40.073 に答える
8

ディレクティブでイベント処理と dom 操作を非表示にすることは、ほぼ angularjs の方法です。イベントが発生したときに scope.$apply を呼び出すと、angular にビューを更新するように指示されます。

このサンプルのように jquery-ui を使用することを検討してください (サンプルの angular wiki を参照してください 。私はangular-ui グループと協力しており、便利な単純なイベント ラッパーがあります。

于 2012-10-14T00:02:58.050 に答える
3

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

  1. ドラッグ可能は真です
  2. ドラッグスタートのリスナー

したがって、ディレクティブは次のようになります

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.
        });
    }
});

ステップバイステップの良い例がここにありますhttp://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

于 2014-06-09T18:47:19.007 に答える