如何在AngularJS中註冊我自己的事件監聽器？

如何在AngularJS應用程序中註冊我自己的事件偵聽器？如何在AngularJS中註冊我自己的事件監聽器？

具體而言，我正在嘗試註冊拖放（DND）偵聽器，以便在將某些東西拖放到我的視圖的新位置時，AngularJS會重新計算業務邏輯並更新模型，然後再更新視圖。

2012-10-13 Tonte Pouncil

在指令中隱藏事件處理和dom操作幾乎是angularjs方式。調用範圍$當事件觸發告訴角度更新視圖時應用$。

你可能會考慮使用jQuery UI的樣in this sample（見angular wiki of examples 我與angular-ui組工作，有一個簡單的事件包裝，你會覺得非常有用。

2012-10-14 00:02:58

感謝您的答覆。我對angularjs很陌生，我不確定我是否正確使用它。無論如何，我看着你的jquery-ui示例應用程序，我不太清楚jquery-ui如何進入圖片，而不是以下指令：jqui-drag-start，jqui-drag-end，jqui-drop-接受和jqui-drop-commit。那是對的嗎？真的嗎？我去了JQuery用戶界面的網站，但沒有看到這些指令。那麼他們從哪裏來？看起來指令是事件，而我們設置它們的東西都是事件處理程序。那是對的嗎？ –

它看起來像你創建了兩個指令（jqui-drag-start和jqui-drag-end）？ –

我正在閱讀如何創建指令現在... –

添加事件偵聽器將在鏈接方法來完成如果你想使用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或東西與角的綁定的例子。

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-14 03:07:40

我非常感謝您花時間與AngularJS分享您的體驗。因爲我對AngularJS非常瞭解，所以我現在更喜歡不要把它與其他第三方庫混在一起;所以我肯定在尋找一個全部的AngularJS解決方案。所以我理解正確，指令基本上是一個事件？或者它只能註冊一個事件？我會再一次玩弄這些指令並回報我學到的東西。謝謝！ –

一個指令是角度的接線。它完成了將標記中的元素和屬性綁定到JS代碼的工作。所以，控制器只是邏輯和規則，模板是你的UI，指令（和$ scope一起）是將它們聯繫在一起的。 –

您可以並且應該在需要執行如下操作時使用指令：1.可重用的控件。 2. DOM操作。 3.事件綁定。等等 –

Ben的不錯解決方案，但請記住，您需要訪問originalEvent和原始元素。根據Mozilla的文檔，兩個條件必須滿足https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

可拖動的是真實的
偵聽器的dragstart

所以指令可能是這個樣子

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-09 18:47:19 zainengineer

如何在AngularJS中註冊我自己的事件監聽器？

回答

相關問題