Currently, I am iterating through the child elements of the element to which the directive is attached, and adding mouseup and mousedown callbacks:
var dragDroppables = element[0].children;
for (var elementIdx = 0; elementIdx < dragDroppables.length; elementIdx++) {
var bindElement = dragDroppables[elementIdx];
var elementID = bindElement.attributes['id'].value;
if(elementID == "DragDroppable") {
var bindElementAngular = angular.element(bindElement);
bindElementAngular.on('mousedown', function() {
bindElementAngular.css('background-color', 'rgb(17, 83, 252)');
elementHeldDown = bindElementAngular;
isElementHeldDown = true;
//window and angular.window are both undefined in this case
var style = angular.window.getComputedStyle(bindElementAngular);
heldDownElementWidth = parseInt(style.getPropertyValue('width'));
heldDownElementHeight = parseInt(style.getPropertyValue('height'));
});
bindElementAngular.on('mouseup', function () {
bindElementAngular.css('background-color', 'rgb(73, 122, 255)');
isElementHeldDown = false;
});
}
}
}
Now, I am facing an issue where the window object is undefined. Previously, when this functionality was in a controller, accessing the window object directly worked fine. However, now that it is in the directive, this approach seems to fail. How can I retrieve CSS properties from an arbitrary DOM object within a directive?