如何在AngularJS中注册我自己的事件监听器？
如何在AngularJS应用程序中注册自己的事件侦听器？
具体地说，我正在尝试注册拖放(DND)侦听器，以便在将某些内容拖放到视图的新位置时，AngularJS会重新计算业务逻辑并更新模型，然后更新视图。
回答 3
Stack Overflow用户
发布于 2012-10-14 11:07:40
添加事件侦听器将在指令的链接方法中完成。下面我写了一些基本指令的例子。但是，如果您想使用jQuery -ui的.draggable()和.droppable()，那么您可以做的就是知道下面每个指令的link函数中的elem参数实际上是一个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>将drop绑定到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>我希望这能有所帮助。
Stack Overflow用户
发布于 2012-10-14 08:02:58
在指令中隐藏事件处理和dom操作几乎就是angularjs的方式。当一个事件触发时，调用scope.$apply，告诉angular更新视图。
您可以考虑使用像in this sample这样的jquery-ui (请参阅angular wiki of examples，我使用angular-ui组，并且有一个简单的事件包装器，您可能会发现它很有用。
Stack Overflow用户
发布于 2014-06-10 02:47:19
本的解决方案不错，但请记住，您将需要访问originalEvent和原始元素。根据Mozilla文档，有两个条件必须满足https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations
- draggable is true
- Listener for 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
https://stackoverflow.com/questions/12874797
复制相似问题
腾讯云开发者
