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

Question

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

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

Answer 1

添加事件侦听器将在指令的链接方法中完成。下面我写了一些基本指令的例子。但是，如果你想使用 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>

使用 Angular 将 drop 绑定到 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>

我希望这会有所帮助。

Answer 2

在指令中隐藏事件处理和 dom 操作几乎是 angularjs 的方式。当事件触发时调用 scope.$apply 会告诉 Angular 更新视图。

您可能会考虑在此示例中使用 jquery-ui （请参阅 我与angular-ui组合作的示例的 angular wiki， 并且有一个简单的事件包装器，您可能会发现它很有用。

Answer 3

Ben 的解决方案不错，但请记住，您需要访问 originalEvent 和 original 元素。根据 Mozilla 文档，两个条件必须满足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