For over an hour, I've been trying to accomplish a seemingly simple task: creating an Angular directive that can both retrieve and set the height of the current element. Additionally, this directive should be able to access the browser window in order to obtain its height.
After testing various methods, I've managed to reach a rather messy point:
myApp.directive("mainposter", function() {
return {
restrict: "E",
replace: false, // default is false, setting true has caused known bugs
// scope: {},
template: '<section class="mainposter">dummy text inside</section>',
link: function(scope, elem) {
console.log("the current tagname is: " + elem.prop("tagName"))
console.log("the current height is: " + elem.height())
}
}
})
I am specifically looking for a way to ensure that this code only executes once during page load, avoiding continuous executions as seen in solutions like this one.
This frustrated Angular newcomer is seeking your assistance. Thank you.
EDIT:
It appears that this question requires a different approach due to the issues related to replace: true mentioned here.