Here is the directive I am using :
App
.directive('maxHeightBorder', function(){
return {
restrict: 'A',
link: function($scope, $el, $attr){
if($el.height() >= $attr.maxHeightBorder){
$el.css('box-shadow','0 0 5px 5px black');
}
}
}
});
This element has the directive applied :
<ul class="list-group" id="events-list" max-height-border="250">The issue arises when the page loads and this element is empty causing the directive's if statement to fail. Once Angular fills the element with content, its height exceeds 250px but the directive is not re-evaluated, resulting in the new style never being applied.