My goal is to enable the dragging functionality of an element using jQuery and Angular directives:
function dragElement($parse) {
return {
restrict: 'A',
link: function($scope, ele, $attr) {
var onDragStart = $attr.onDragStart ? $parse($attr.onDragStart) : null;
var dragData = $scope.$eval($attr.dragData) || ele;
ele.draggable({
containment: 'document',
revert: true,
helper: "clone"
});
ele.on("dragstart", handleDragStart);
function handleDragStart(e) {
if (onDragStart) {
$scope.$apply(function() {
var locals = {
$event: e,
$dragData: dragData,
};
onDragStart($scope, locals); //locals are defined fine here
});
}
}
}
};
}
In my controller, I have a function that triggers when I start dragging. Although the function is called correctly, the issue arises as the argument list is empty and the local variables passed in the directive are not accessible.
Controller Function
function handleFeatureDragStart($event, data) {
console.log(arguments); //Empty
console.log('inside handle feature start');
console.log($event); //undefined
console.log(data);//undefined
}