Adjust the element height in AngularJS - css

Question

I am working with AngularJS (pretty new). I have encountered a challenge which is if the textarea value is to big I have to make it scrollable as well as the border around it and if not I have to remove the border and scrolling as well. I try adding the directive but couldn't make it work.
Let me know if there is any work around it. I appreciate your time and help.
Updated:
angular.module('myApp')
.directive('removeBorder', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (element[0].clientHeight < element[0].scrollHeight) {
console.log(element.clientHeight);
console.log(element.scrollHeight);
console.log('ELEMENT: ' + element[0]);
angular.element(element[0]).removeClass('scroll');
}
}
};
});

Answer 1

I made you an example with nativeJS and angularJS with native JS. Just check Elements clientHeight and scrollHeightattribute to make it work.
angularJS directive
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {}])
.directive('removeBorder', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (element[0].clientHeight >= element[0].scrollHeight) {
console.log(element[0].clientHeight);
console.log(element[0].scrollHeight);
angular.element(element[0]).addClass('no-scroll');
}
}};
});
Native JS - Plunker
function hasScrollbar(elemId) {
elem = document.getElementById(elemId);
if (elem.clientHeight < elem.scrollHeight) {
alert("The element #" + elemId + " has a vertical scrollbar!");
} else {
alert("The element #" + elemId + " doesn't have a vertical scrollbar.");
elem.style.border= "0";
}
}
Scrollable shoulb be set automatically. Or use css:
textarea { overflow-y:scroll; }