Pavel Valeriu Pavel Valeriu - 7 months ago 16
HTML Question

AngularJS: How to get element height

I'm trying to find the height of an element and add a class to it if his height is greater than 300px.
I know that this question has some answers but I don't know what I'm doing wrong..

My goal is to add an overflow scrollbar if

text
has
height > 300px


JSFIDDLE

This what I've done so far:

var myApp = angular.module('myApp', []);
myApp.directive('overflow', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {

var height = elem.height();
if(height>100) {
elem.addClass('overflow');
}
else {
elem.removeClass('overflow');
}
}
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div overflow class="text">
<p>
long text long text long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text
</p>
</div>
</div>

Answer

elem.height() is not a function so you can use scrollHeight property.

Check below fiddle.

https://jsfiddle.net/alpeshprajapati/U3pVM/24274/