1

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?

Zed
  • 5,683
  • 11
  • 49
  • 81
  • Consider making the manipulation after `ng-repeat` finishes. Check http://stackoverflow.com/questions/19864007/angularjs-event-for-when-model-binding-or-ng-repeat-is-complete, for instance. – Vadim Landa Apr 30 '15 at 08:48

1 Answers1

0

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.

Michael
  • 3,085
  • 1
  • 17
  • 15
  • Just tried wrapping DOM manipulation inside the $timeout, and this seems to work, thanks. – Zed Apr 30 '15 at 08:56