I'm in the process of developing a directive that can detect changes in screen size, either width or height, and adjust the height of my element accordingly.
The main goal is to have my element extend all the way to the bottom of the browser window.
This is the code for my directive:
.directive('strechToBottom', ['$document', '$window', function ($document, $window) {
return {
restrict: 'A',
link: function (scope, element, attributes) {
var space;
scope.$watch(function () {
return $window.innerHeight;
}, function () {
space = $window.innerHeight - element[0].offsetTop;
element.css('min-height', space + "px");
});
}
};
}]);
Initially, everything works fine when the element is first created. However, the issue arises when I resize the screen - the function isn't triggered immediately. It seems like there's a delay before the function kicks in during the cycle, which is confusing to me.
I also attempted to listen for innerWidth changes, but that approach didn't yield any results either.
What could be causing this problem in my code?