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

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

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

2012-10-13 Tonte Pouncil

在指令中隐藏事件处理和dom操作几乎是angularjs方式。调用范围$当事件触发告诉角度更新视图时应用$。

你可能会考虑使用jQuery UI的样in this sample（见angular wiki of examples 我与angular-ui组工作，有一个简单的事件包装，你会觉得非常有用。

2012-10-14 00:02:58

感谢您的答复。我对angularjs很陌生，我不确定我是否正确使用它。无论如何，我看着你的jquery-ui示例应用程序，我不太清楚jquery-ui如何进入图片，而不是以下指令：jqui-drag-start，jqui-drag-end，jqui-drop-接受和jqui-drop-commit。那是对的吗？真的吗？我去了JQuery用户界面的网站，但没有看到这些指令。那么他们从哪里来？看起来指令是事件，而我们设置它们的东西都是事件处理程序。那是对的吗？ –

它看起来像你创建了两个指令（jqui-drag-start和jqui-drag-end）？ –

我正在阅读如何创建指令现在... –

添加事件侦听器将在链接方法来完成如果你想使用jquery-ui的.draggable（）和.droppable（），你可以做的是知道elem在link函数中的参数下面的每个指令实际上是一个jQuery对象，所以你可以调用elem.draggable()并做你要做的事情。

这里是在角结合的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>

一个绑定到一个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>

我希望有所帮助。

来源

2012-10-14 03:07:40

我非常感谢您花时间与AngularJS分享您的体验。因为我对AngularJS非常了解，所以我现在更喜欢不要把它与其他第三方库混在一起;所以我肯定在寻找一个全部的AngularJS解决方案。所以我理解正确，指令基本上是一个事件？或者它只能注册一个事件？我会再一次玩弄这些指令并回报我学到的东西。谢谢！ –

一个指令是角度的接线。它完成了将标记中的元素和属性绑定到JS代码的工作。所以，控制器只是逻辑和规则，模板是你的UI，指令（和$ scope一起）是将它们联系在一起的。 –

您可以并且应该在需要执行如下操作时使用指令：1.可重用的控件。 2. DOM操作。 3.事件绑定。等等 –

Ben的不错解决方案，但请记住，您需要访问originalEvent和原始元素。根据Mozilla的文档，两个条件必须满足https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

可拖动的是真实的
侦听器的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

来源

2014-06-09 18:47:19 zainengineer

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

回答

相关问题