Replace jQuery MouseEvent with pure AngularJS

Question

Currently I have in my Angular directive in the link function the following code: (This directive is inserted in the dom at a top level.)

$(document).on("mousedown", ".resizer", function (e) {
    e.preventDefault();
    resizing = true;
    frame = $(e.target).parent();
});

$(document).mousemove(function (e) {
}

I would like to discard jQuery and use pure Angular.

What's the right way to replace the above code with Angular. Does it make sense to use the Angular directive ng-mousedown in the element with the class .resizer and broadcast the event to my top level directive?

Are there any better approaches in Angular?

Many thanks in advance.

Answer 1

Here we go:

.controller('controllerFromDirective_resizeWidget', function ($scope) {
    this.mouseDownResizer = function (e) {
    };
});

.directive('mouseDownOnElement', function () {
    return {
        require: '^resizeWidget',
        link: function (scope, element, attr, controller) {
            element.on("mousedown", function (e) {
                e.preventDefault();
                controller.mouseDownResizer(e);
            });
        }
    };
});

IMO a nice solution for the problem. Maybe there is even a better solution? Thanks.