Manipulate template after compilation

Question

I have a simple template that uses ng-repeat:

template.html

<div id='tmpl'>
  <ul>
    <li ng-repeat="item in items">{{ item.desc }}</li> 
 </ul>
</div>

Inside my directive, I am compiling that template with a custom scope. and then that template is added to the page:

var element = $('#my-div');
var compiledTemplate = $compile(scope.template)(customScope);
element.before(compiledTemplate);
$('#tmpl').show();

This works well, however the issue is that after calling the show(), I am trying to access the templates innerHeight(), but at that time ng-repeat inside the template isn't executed yet and I'm getting the value before the elements are rendered.

   $('#tmpl').innerHeight(); // returns value before ng-repeat is finished

So, is there a secure way to do DOM manipulation of the compiled element, after ng-repeat finish processing elements?

Answer 1

You could create a directive and get the 'innerHeight' in the post link phase. The ng-repeat should already been executed and the correct height should be available.

Alternatively you can use $timeout and run the function after the template has completely rendered.