如何添加元素并将事件绑定到它？答案

【问题标题】：How to add an element and bind an event to it?如何添加元素并将事件绑定到它？
【发布时间】：2014-04-13 07:14:49
【问题描述】：

我想做一个调整大小指令。因此，我想创建一个新元素（调整器）并将一个事件绑定到它，但在我的代码中，该事件绑定到指令根元素：

elm.append('<div class="iwResizable__resizer"></div>').bind('mousedown', function ($event) {
                        startW = elm.prop('offsetWidth');
                        startH = elm.prop('offsetHeight');
                        initialMouseX = $event.clientX;
                        initialMouseY = $event.clientY;
                        $document.bind('mousemove', mousemove);
                        $document.bind('mouseup', mouseup);
                        $event.preventDefault();
                });

如何将 mousedown-event 绑定到我的新 div？

这是Plunker

【问题讨论】：

我不确定您是否以非常有角度的方式进行操作...您见过ng-mousedown吗？
我将它放在指令的链接块中，因为我需要访问“元素”属性。这在控制器中也可能吗？对不起，我是角度的新手。 @glepretre
DOM 操作确实必须在指令中，但我不太了解你的 resize 指令的周长，你能创建一个简单的小提琴/plunker吗？
好的，这是我的plunker@glepretre
好，您应该编辑您的问题以添加它；）这似乎有点矫枉过正，预期的行为是什么？

标签： angularjs events angularjs-directive dom-manipulation

【解决方案1】：

如果您没有使用 jQuery（您似乎没有使用），您应该在不同的语句中进行实例化/绑定和附加：

var resizer = angular.element('<div class="myResizable__resizer"></div>')
                     .bind('mousedown', function ($event) {...});
elm.append(resizer);

如果你使用 jQuery，你可以使用 appendTo() 函数（在 JQLite 中是 not implemented），你可以这样做： p>

$('<div class="myResizable__resizer"></div>').appendTo(elm).bind(...);

【讨论】：