如何注册在AngularJS我自己的事件监听器？ [英] How to register my own event listeners in AngularJS?

问题描述

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

How do I register my own event listeners in an AngularJS app?

要具体，我想注册拖放（DND）监听器，这样当事情被拖在我看来，一个新的位置下降，AngularJS重新计算业务逻辑和更新模型，然后视图。

To be specific, I am trying to register Drag and Drop (DND) listeners so that when something is dragged and dropped in a new location of my view, AngularJS recalculates the business logic and updates the model and then the view.

推荐答案

添加事件侦听器将在指令的链接方法来完成。下面，我已经写了基本指令的一些例子。但是，如果你想使用jQuery的UI的.draggable（）和.droppable（），你可以做的是知道，在 ELEM 参数下面的每个指令>链接函数实际上是一个jQuery对象。所以，你可以叫 elem.draggable（），做你要做那里。

Adding an event listener would be done in the linking method of a directive. Below I've written some examples of basic directives. HOWEVER, if you wanted to use jquery-ui's .draggable() and .droppable(), what you can do is know that the elem param in the link function of each directive below is actually a jQuery object. So you could call elem.draggable() and do what you're going to do there.

下面是对角结合的dragstart用指令的示例：

Here's an example of binding dragstart in Angular with a directive:

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>

绑定下降到一个div或者一些与角的一个例子。

An example of binding drop to a div or something with 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>

我希望帮助。

这篇关于如何注册在AngularJS我自己的事件监听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！