How to get height in AngularJS like in JQuery?

Question

I have this jquery snippet below:

  $(document).ready(function() {
    var height = Math.max($("#one").height(), $("#two").height());
    $("#one").height(height);
    $("#two").height(height);
});

I want to convert that to AngularJS, but I've been having an issue on actually getting the height. I've tried many different things including offsetHeight and scrollHeight and they all return 0. Is that because I'm using a table? I'm not sure how to do it / if I'm doing it right. Here's kind of an outline of what I've been trying to do so far:

 $scope.height = function()
{
    var height = window.Math.max(HEIGHT OF MY ELEMENT "firstTable", HEIGHT OF MY ELEMENT "secondTable");
    //Now get the height and set it.
};

I'm not sure if I should make this into a directive and put it in my table (where I can access $element) or what.

Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:06

I would recommand using plain old javascript to do so.

Looks like this works well :

document.getElementById('someDiv').clientHeight;
// clientHeight includes the height and vertical padding.
document.getElementById('someDiv').offsetHeight;
// offsetHeight includes the height, vertical padding, and vertical borders.
document.getElementById('someDiv').scrollHeight;
// scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Found solution on Stackoverflow : CSS / JavaScript - How do you get the rendered height of an element? so I do not have any merit ;).

score 0 · Answer 2 · answered Sep 02 '15 at 21:27

jqLite (which is included in Angular) is limited and doesn't offer a function to calculate the height.

Your best options here is to inject the element into controller, and get the height via:

element[0].offsetHeight;

Demo on plnkr: http://plnkr.co/edit/g45SX4unuCNwlVIUEw4j?p=preview

score 0 · Accepted Answer · answered Sep 02 '15 at 21:27

What you're looking for isn't to use AngularJS to get height, but rather use native JavaScript.

Use document.getElementById() to select your element then use .offsetHeight to get the height and finally .style.height to set your height.

Your code would look a little like this:

var elementOne = document.getElementById("one"),
    elementTwo = document.getElementById("two"),
    height = Math.max(elementOne.offsetHeight, elementTwo.offsetHeight);
elementOne.style.height = height;
elementTwo.style.height = height;

Note that I created variables for each element to avoid repeatedly retrieving the element via document.getElementById() for getting and setting the height.

How to get height in AngularJS like in JQuery?

3 Answers3