As I dive into the world of Angular, any assistance is greatly welcomed. My goal is to vertically align a div based on screen size (excluding the header and footer) when the page loads, the window resizes, and during a custom event triggered by the user expanding content. To achieve this, I have developed a directive, though I am unsure if this is the most effective approach. The key challenge lies in retrieving the element's height within the directive for it to function correctly.
In my scenario, relying solely on CSS without JavaScript proves inadequate due to the intricate nesting and complexity of the markup structure. Various techniques like inline-block or translate have been attempted but did not yield the desired results.
Here are the obstacles encountered:
The element's height returns as 0 upon initial attempt to retrieve it within the directive, presumably because the view has not yet rendered. While this rationale is understandable, how can this limitation be circumvented so that all necessary CSS modifications are applied via JavaScript at the onset of the view transition?
How can the directive be triggered, for instance, after loading additional content or executing other DOM manipulations?
Thus far, here is the current code snippet:
app.directive('valign', ['$window', function ($window) {
return {
link: function ($scope, $element) {
var window = angular.element($window);
$scope.setHeight = function () {
var contentHeight = window.height() - $('#header').outerHeight(true) - $('#footer').outerHeight(true);
// At this point, I aim to acquire the $element's height to appropriately set its margin, among other adjustments
};
$scope.setHeight();
window.bind('resize', function () {
$scope.setHeight();
$scope.$apply();
});
}
};
}]);