How to trigger an event in AngularJS as in jQuery?

Question

Is it possible to do something like $("#container").trigger("click"); using only AngularJS ? And if it's not possible to trigger, is there another way to manage this behavior ?

I have a basic example that creates a box on a button click. The created box is draggable. Now, currently the user has to click on the button (to create the box) and click again to drag the box. I would like the user to simply click once : to create the box and then trigger the drag event of the box so that the user doesn't have to click again.

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

Ed_ · Accepted Answer · 2014-09-07 10:13:57Z

8

The documentation you want to look at is angular.element, which is angular's JQLite implementation.

You can see from this that there is a .triggerHandler() method.

So something like:

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

Will trigger the handler. The only thing is, this doesn't include any of the event data, so you will also have to remove the dependency on event.pageY. I did this crudely by modifying these two lines:

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

You could also look into passing params, but I couldn't get that to work at all.

Hopefully this gets you started.

Updated fiddle

answered Sep 7, 2014 at 10:13

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benny Bottema Over a year ago

Here's the fixed jsFiddle where drag and release works properly: jsfiddle.net/ajadpnbt

Elfayer Over a year ago

I misunderstood the part "Passes a dummy event object to handlers" in the documentation. Thanks ! =) But does Angular offers a diferent way to manage a trigger event that needs to use the $event object ? Or is it basically not possible ?

Ed_ Over a year ago

I think you can use the extraParameters array in the triggerHandler documentation to add a dummy event, then add a second argument to your element.on('mousedown', function(event, event). I guess because this isn't actually a real event (you're just triggering the handler), then you can't auto-generate the data.

nickgzzjr · Accepted Answer · 2016-03-31 04:11:37Z

1

You can use a triggerHandler and pass custom event data.

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

answered Mar 31, 2016 at 4:11

nickgzzjr

4296 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to trigger an event in AngularJS as in jQuery?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related