I have created a custom directive where I am trying to capture the $document.mousemove event to adjust the position of a div for the purpose of implementing a number slider (e.g. sliding numbers between 1 to 100).
<div ng-mousedown="handleDown($event)"></div>
The above ng-mousedown event triggers 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);
};
While the mouseup function successfully executes and logs a message, the mousemove function does not get triggered:
function mousemove(event) {
console.log("MOUSE MOVE");
}
function mouseup() {
console.log("MOUSE UP");
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
In case it helps, here is my custom directive:
.directive('fmSlider', function($document) {
return {
restrict: 'E',
scope: {
fmMin: '=',
fmMax: '=',
fmDefault: '='
},
templateUrl: 'path-to-template/slider.html'
};
});
I am puzzled as to why the mouseup event functions correctly while the mousemove event does not trigger. Any assistance is greatly appreciated. Thank you.