I am attempting to use an angularjs directive to align the right side of an absolute div with another div. The code is working, but I am encountering an issue where the children divs are slightly wider than their parent, causing the offsetWidth value to be incorrect.
Here is my directive code:
app.directive('alignElementRight', function ($document) {
return {
restrict: 'A',
scope: {
alignElementRight: '@'
},
link: function (scope, element, attrs) {
scope.$watch('alignElementRight', function (value) {
console.log(value);
var relEleme = $document.find('#' + value);
var myEl = angular.element(document.querySelector('#' + value));
var elOffsetLeft = myEl[0].offsetLeft;
var elOffsetTop = myEl[0].offsetTop;
var elOffsetWidth = myEl[0].offsetWidth;
console.log('main width:' + elOffsetWidth);
var absElemOffsetWidth = element[0].offsetWidth;
console.log('menu: ' + absElemOffsetWidth);
var newOffsetLeft = Math.abs(elOffsetLeft + elOffsetWidth - absElemOffsetWidth);
element.css({
left: newOffsetLeft + 'px'
});
});
}
};