Enhancing your HTML with custom directives for DOM manipulation!
var elemstyle = angular.module('elemstyle', []);
elemstyle.controller('HeightBasedElCtrl', ['$scope', function($scope){
$scope.data = {
maxH : 200
};
}]);
elemstyle.directive('heightBasedCss', [function(){
return {
transclude : true,
template : '<div ng-class="{true : \'panel panel-success\', false: \'panel panel-danger\'} [ checkHeight() ]" ng-transclude><div>',
link: function(scope, elem, attrs) {
scope.checkHeight = function() {
return elem[0].offsetHeight < scope.data.maxH;
};
}
};
}]);
Implement the directive by adding this to your HTML:
<div height-based-css>
<!--
Add any desired content within this element...
-->
</div>
Try out the demo on jsfiddle here: http://jsfiddle.net/jfabfab/cL3Lda69/
Run jasmine tests for functionality verification: http://jsfiddle.net/jfabfab/taakfhhs/
Note about the jsfiddle version: Used textarea binding to demonstrate real-time style changes + Future plan for jasmine test on element offsetHeight alterations.
Hope this information proves useful to you.