如何在AngularJS应用程序中注册我自己的事件监听器?
具体来说,我正在尝试注册拖放(DND)侦听器,以便在我的视图的新位置拖放某些内容时,AngularJS会重新计算业务逻辑并更新模型,然后更新视图。 / p>
答案 0 :(得分:47)
添加事件侦听器将在指令的链接方法中完成。下面我写了一些基本指令的例子。但是,如果你想使用jquery-ui的.draggable()和.droppable(),你可以做的是知道下面每个指令的elem
函数中的link
param实际上是一个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>
使用Angular绑定到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>
我希望有所帮助。
答案 1 :(得分:8)
在指令中隐藏事件处理和dom操作几乎就是angularjs方式。调用范围。$ event在事件触发时告诉angular更新视图。
您可以考虑使用in this sample之类的jquery-ui(请参阅angular wiki of examples 我使用angular-ui组,你可能会发现一个简单的事件包装器。
答案 2 :(得分:3)
Ben提供的解决方案,但请记住,您需要访问originalEvent和原始元素。根据Mozilla文档,两个条件必须符合https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations
所以指令可能看起来像这样
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