I am looking to develop a directive that can be applied to elements to adjust their maximum height to be equal to the height of the window minus the distance from the top of the element to the top of the window.
I have attempted it in the following manner
.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function() {
return { 'h': w.height() };
};
scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
//get header height including margins
var headerHeight = $('.page-header').outerHeight(true);
scope.windowHeight = newValue.h;
scope.style = function() {
return {
'height': (scope.windowHeight - headerHeight) + 'px',
'max-height': (scope.windowHeight - headerHeight) + 'px'
};
};
}, true);
w.bind('resize', function() {
scope.$apply();
});
}
})
However, it seems that I would need to add a variable for each element located above the element whose height I want to adjust. So, I am considering utilizing
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
as it can simplify the measurements in relation to the element it is adjusting. How can I access this element within the directive without the need for extra class names or identifiers?
Additionally, should I create an isolated scope in order to use this functionality more than once on a single page?
Ultimately, I aim to ensure that the body element of my web applications matches the height of the window, and any nested elements exceeding that height would be equipped with scroll bars.