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

Question

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

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

Answer 1

添加事件侦听器将在指令的链接方法中完成.下面我写了一些基本指令的例子.但是,如果你想使用jquery-ui的.draggable()和.droppable(),你可以做的是知道下面每个指令函数中的elemparam 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绑定到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方式.调用范围.$ event在事件触发时告诉angular更新视图.

您可以考虑在此示例中使用jquery-ui (请参阅 我使用angular-ui 组的示例的角度wiki,并且您可能会发现一个简单的事件包装器.