angular ng-repeat hides style of div - html

Question

I am using angular ng-repeat to get several divs. The code in original template html is :
<div class="span5 noMarginLeft">
<div class="dark">
<h1>Timeline</h1>
<div class="timeline">
<div class="timeslot">
<div class="task">
<span>
<span class="type">appointment</span>
<span class="details">
Dennis Ji at Bootstrap Metro Dashboard HQ
</span>
<span>
remaining time
<span class="remaining">
3h 38m 15s
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and the style of each div (class: 'timeslot' or 'timeslot alt') is auto-calculated for its height:
and the result of the code is:
when I use ng-repeat to get these divs, (code here)
<div class="timeslot" ng-repeat="comment in allComments">
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
the style of the div is gone, and the height of each div is not auto-calculated. How can I solve this? Thanks in advance.

Answer 1

You should create a directive to make the calculation. if you are doing this with jquery then you are going to face same issue.
/**
* Lets create directive
*/
angular
.module('demoApplication')
.directive('autoHeight', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
//Do your calculations here
console.log(element.css('height'));
}
};
}]);
HTML
<div class="timeslot" ng-repeat="comment in allComments" auto-height>
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
Woring plunker for directive