如何像在 jQuery 中一样在 AngularJS 中触发事件？答案

【问题标题】：How to trigger an event in AngularJS as in jQuery?如何像在 jQuery 中一样在 AngularJS 中触发事件？
【发布时间】：2014-09-07 09:58:11
【问题描述】：

是否可以只使用 AngularJS 来做类似$("#container").trigger("click"); 的事情？如果无法trigger，还有其他方法可以管理这种行为吗？

我有一个基本示例，它在单击按钮时创建一个框。创建的框是可拖动的。现在，当前用户必须单击按钮（创建框）并再次单击以拖动框。我希望用户只需单击一次：创建框，然后触发框的拖动事件，这样用户就不必再次单击。

var app = angular.module("app", []);

// This directive is attached to the button and makes it create a box every time the is a 'mousedown' event
app.directive("boxCreator", function($document, $compile) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            $element.bind("mousedown", function($event) {
                var newNode = $compile('<div class="box" drag></div>')($scope);

                newNode.css({
                    top: $event.pageY - 25 + "px",
                    left: $event.pageX - 25 + "px"
                    });

                angular.element($document[0].body).append(newNode);
                // I'd like to do something like : '$(newNode).trigger("mousedown");'
            });
        }
    }
});

// Makes the binded element draggable
app.directive("drag", function($document) {
    return function(scope, element, attr) {
        var startX = 0, startY = 0, x = event.pageX - 25, y = event.pageY - 25;

        element.css({
         position: 'absolute',
         cursor: 'pointer'
        });

        element.on('mousedown', function(event) {
          event.preventDefault();
          startX = event.pageX - x;
          startY = event.pageY - y;
          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
          y = event.pageY - startY;
          x = event.pageX - startX;
          element.css({
            top: y + 'px',
            left:  x + 'px'
          });
        }

        function mouseup() {
          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }
      };
    });

JSFIDDLE

【问题讨论】：

标签： angularjs

【解决方案1】：

您要查看的文档是angular.element，它是 Angular 的 JQLite 实现。

从中可以看出有一个.triggerHandler()方法。

比如：

angular.element(newNode).triggerHandler('mousedown');

将触发处理程序。唯一的问题是，这不包括任何事件数据，因此您还必须删除对event.pageY 的依赖。我通过修改这两行粗略地做到了这一点：

startX = (event.pageX - x) || 0;
startY = (event.pageY - y) || 0;

您也可以查看传递参数，但我根本无法让它工作。

希望这能让你开始。

Updated fiddle

【讨论】：

这是固定的 jsFiddle，其中拖动和释放正常工作：jsfiddle.net/ajadpnbt
我误解了文档中的“将虚拟事件对象传递给处理程序”部分。谢谢！ =) 但是 Angular 是否提供了一种不同的方式来管理需要使用 $event 对象的触发事件？还是基本不可能？
我认为您可以使用triggerHandler 文档中的extraParameters 数组添加一个虚拟事件，然后将第二个参数添加到您的element.on('mousedown', function(event, event)。我猜是因为这实际上不是一个真实的事件（你只是触发了处理程序），所以你不能自动生成数据。

【解决方案2】：

您可以使用triggerHandler 并传递自定义事件数据。

element.triggerHandler({
    type: 'mousedown',
    pageX: 0,
    pageY: 0
});

【讨论】：