Upon page load, a directive is triggered to resize the content to fit within the correct dimensions. However, there seems to be an issue when a service call populates the model of a specific section of content after the resizing has taken place. The element's height is calculated as 0 because the model has not been updated yet at the time of resizing. This poses a challenge as I aim to resize the elements immediately on page load to prevent any visible movement on the screen. Is there a way to determine the section's height post-digestion or obtain an accurate height pre-digestion?
myApp.directive('resize', function() {
return function(scope, element) {
var htmlHeight = angular.element("html").height();
var headerHeight = angular.element("#page-header").height();
var dashboardHeight = angular.element(".top-dashboard").height(); // Returns 0 due to data being pre-loaded
var totalHeight = htmlHeight - headerHeight - dashboardHeight;
scope.$on('$viewContentLoaded', function() {
element[0].style.height = totalHeight + 'px';
});
}
});
The HTML snippet featuring the directive:
<section class="top-dashboard row full" resize>
<div class="small-3" ng-include src="'partials/location.html'"></div>
</section>
Update 1: Despite attempting to preload data using resolve before the controller loads, the height still returns as 0.
Update 2: Could this issue stem from the fact that it's a template being included? Wrapping it in a timeout or using a resolve did not alleviate the problem.