Angular mousemove event

Question

I have made a directive, inside I am attempting to listen to the $document.mousemove event in order to reposition a div - for the purpose of making a number slider (ie slide numbers between 1-100).

<div ng-mousedown="handleDown($event)"></div>

The above mousedown event is fired and handled by the following function:

$scope.handleDown = function(event) {
    console.log("MOUSE DOWN");
    event.preventDefault();
    startX = event.pageX - x;
    startY = event.pageY - y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
};

The mouseup function does work and causes a console log, but the mousemove does not fire at all:

function mousemove(event) {
    console.log("MOUSE MOVE");
}

function mouseup() {
    console.log("MOUSE UP");
    $document.unbind('mousemove', mousemove);
    $document.unbind('mouseup', mouseup);
}

If it is relevant, my directive:

.directive('fmSlider', function($document) {

    return {
        restrict: 'E',
        scope: {
            fmMin: '=',
            fmMax: '=',
            fmDefault: '='
        },
        templateUrl: 'path-to-template/slider.html'
    };

});

I don't understand why the mouseup would work, but the mousemove would not. Thanks for the help.

Answer 1

I don't know if this helps you but i encountered a similar problem with my code and my controller declaration looked first something like this

app.controller('ToolBoxCtrl', function ($scope)

but when i changed it to

app.controller('ToolBoxCtrl', function ($scope,$document)

then it worked. I am not quite sure why but hey at least something.

Thanks to the example by Charlie Martin