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

Question

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

具体来说，我正在尝试注册拖放(DND)监听器，以便当将某些内容拖放到 View 的新位置时，AngularJS 会重新计算业务逻辑并更新模型，然后更新 View 。

Answer 1

添加事件监听器将在指令的链接方法中完成。下面我写了一些基本指令的示例。但是，如果您想使用 jquery-ui 的 .draggable() 和 .droppable()，您可以做的是知道每个的 link 函数中的 elem 参数下面的指令实际上是一个 jQuery 对象。因此，您可以调用 elem.draggable() 并执行您要执行的操作。

下面是在 Angular 中使用指令绑定(bind) 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 绑定(bind)到 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>

希望对您有所帮助。