I am working with a nested directive setup like this.
<main>
<app-header></app-header>
<app-footer></app-footer>
</main>
The app-footer directive contains a small div with a height of approximately 50px.
<div class="footer"></div
My goal is to retrieve the height of the footer within the main directive's link function.
angular.module("app").directive("main", [function () {
return {
"restrict": "E",
"transclude": true,
"template": "<h1>hello</h1><div ng-transclude></div>",
"link": link
};
function link(scope, element) {
var footerHeight1 = $(".footer").height() || 0; // returns 0
var footerHeight2 = element.find('.footer'); // returns prevObject
}
}]);
Unfortunately, I have been unable to successfully retrieve the height of the footer.