如何在AngularJS中注册我自己的事件监听器?

如何在AngularJS应用程序中注册我自己的事件监听器?

具体来说,我正在尝试注册拖放(DND)侦听器,以便在将某些东西拖放到我的视图的新位置时,AngularJS将重新计算业务逻辑并更新模型,然后更新视图。

添加事件侦听器将在一个指令的链接方法中完成。 下面我写了一些基本指令的例子。 然而,如果你想要使用jQuery UI的.draggable()和.droppable(),你可以做的是知道在下面的每个指令的link函数elem参数实际上是一个jQuery对象。 所以你可以调用elem.draggable()并在那里做你要做的事情。

下面是一个绑定dragging在Angular中的例子:

 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> 

我希望有帮助。

在指令中隐藏事件处理和dom操作几乎是angularjs方式。 调用范围$当事件触发时应用$angular色来更新视图。

你可以考虑像这个例子一样使用jquery-ui(参见我使用angular-ui组的例子的angular度wiki,并且有一个简单的事件包装器,你可能会觉得有用。

本由尼斯的解决scheme,但请记住,您将需要访问originalEvent和原始元素。 根据Mozilla文档,两个条件必须符合https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

  1. 可拖动是真实的
  2. 用于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