In a unique scenario I find myself in, there is a need to modify the CSS within a controller. While not typically recommended, it is necessary for this specific situation as outlined below.
Within an ng-repeat loop, I have a title and description housed inside list elements. The goal is to apply a CSS class to the description based on the height of the title div.
However, attempting to retrieve the height of the 'title' div by id within the controller always returns the height of the first element. This issue becomes evident when trying to access the text of the title. The controller logic is presented as:
$scope.getClass = function() {
var title = document.getElementById('title');
var titleHeight = window.getComputedStyle(title, null).getPropertyValue("height");
var titleText = document.getElementById('title').textContent;
if(titleHeight == '50px') {
return 'description-small';
}
else if(titleHeight == '25px') {
return 'description-large';
}
};
The corresponding HTML code is structured as follows:
<ul>
<li class="li-element" ng-repeat="item in itemList">
<div id="title" class="title" data-ellipsis data-ng-bind="item.title"></div>
<div class="{{getClass()}}" data-ellipsis data-ng-bind="item.description"></div>
</li>
</ul>
This results in subsequent descriptions inheriting the height set for the first item's title, regardless of its actual size.
The behavior seems related to how ng-repeat functions, and being relatively new to this, I am unsure how to address it - any suggestions?
A demonstration of the problem can be viewed here: http://plnkr.co/edit/G1QEq62CbJ0HpNZ0FfSm
REASON FOR MANIPULATING DOM IN CONTROLLER:
The challenge arises from dealing with dynamic content where the height of the title fluctuates based on the length. To maintain consistency, both the title and description have a combined height limit of 125px. However, due to uncertainty regarding the title's height, determining the appropriate height for the description proves challenging. The 'data-ellipsis' directive relies on CSS-defined heights.
Hence, the necessity to dynamically adjust the description class based on the title's height. If there are alternative approaches to resolve this, I am open to exploration!
For reference, here is the link to the data ellipsis directive utilized: https://github.com/dibari/angular-ellipsis