I am having trouble with a custom draggable directive in AngularJS. I keep getting a RangeError. Can someone please help me diagnose the issue in this code?
(function (window, angular, undefined) {
var app = angular.module('ngDraggableModule', []);
app.directive('easyDrag', ['$document', function ($document) {
return {
restrict: 'EA',
scope: {
params: '=',
elemId: '='
},
link: function (scope, elem, attrs) {
var isMouseDown = false,
startDrag = false,
position = {},
x = 0,
y = 0,
startX = 0,
startY = 0,
changedPos = 0;
elem.bind('mousedown', onMouseDown);
function onMouseDown(e) {
if (angular.isDefined(scope.params.disabled) && scope.params.disabled === true) {
return false;
}
isMouseDown = true;
startX = e.screenX - x;
startY = e.screenY - y;
$document.bind('mousemove', onMouseMove);
$document.bind('mouseup', onMouseUp);
}
function onMouseMove(e) {
if (isMouseDown) {
if (!startDrag) {
startDrag = true;
if (angular.isFunction(scope.params.start)) {
scope.params.start(changedPos, e, scope.elemId);
}
}
y = e.screenY - startY;
x = e.screenX - startX;
position = {};
if (angular.isDefined(scope.params.axis)) {
if (scope.params.axis.toLowerCase() == 'x') {
position.marginLeft = x + 'px';
}
else if (scope.params.axis.toLowerCase() == 'y') {
position.marginTop = y + 'px';
}
} else {
position.marginTop = y + 'px';
position.marginLeft = x + 'px';
}
changedPos = position;
elem.css(position);
if (angular.isFunction(scope.params.drag)) {
scope.params.drag(e, changedPos, scope.elemId);
}
}
}
function onMouseUp(e) {
if (!isMouseDown) {
return false;
}
isMouseDown = false;
startDrag = false;
if (angular.isFunction(scope.params.stop)) {
scope.params.stop(changedPos, e, scope.elemId);
}
}
}
}
}]);
})(window, window.angular, undefined);
var app = angular.module('DemoApp',['ngDraggableModule']);
app.controller('MainCtrl',['$scope',function($scope){
$scope.assetDragParams = {
drag : function(e,pos,id){
console.log(id); // here is the error
}
}
}])<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MainCtrl">
<div easy-drag params="assetDragParams" elem-id="col._id">
drag it
</div>
</div>When I use this directive, I keep getting a RangeError: Maximum call stack size exceeded. Can someone please help me figure out what's causing this error? Thank you in advance.