executing a directive post the rendering action of a template.

[Shishir Ramam]

Hi, 

Your friendly <noob/> here...

My Requirement: 

To center a container DIV every time an angular template renders or the window resizes.

I'm trying to compute the dimensions of rendered template elements and compute the centering dimensions. 

In the example file attached, the 'container' element is meant to serve this purpose. 

Questions: 

1. All directives after ng:repeat seem to be fired before the loop rendering is done.

   The log messages in the directive my:reposition print window dimensions W,H and container dimensions w,h. 

   the sample output with commentary.

reposition : Window(W,H):1366,300 element(w,h):60,22        <-- file loaded here

embedded alist: Window(W,H):1366,300 element(w,h):0,0       <-- alist loop iteration 0

embedded elem: Window(W,H):1366,300 element(w,h):2,2   

embedded elem: Window(W,H):1366,300 element(w,h):19,22

embedded alist: Window(W,H):1366,300 element(w,h):34,22     <-- alist loop iteration 1

embedded elem: Window(W,H):1366,300 element(w,h):36,22

embedded elem: Window(W,H):1366,300 element(w,h):53,22

embedded elem: Window(W,H):1366,300 element(w,h):70,22

reposition : Window(W,H):809,115 element(w,h):85,22         <-- Window resized here. 

 

The loops are highlighted in grey. Notice how the w=34 or 70 when the correct value is 85. 

A simple resizing of the window yields the correct answer - highlighted in green. 

The directive is running before the rendering action. Is there a way to force a directive to run post rendering action?

Perhaps an ng:end directive?

thanks,

-shishir

-- 

Imagine there were no hypothetical situations.

[Misko Hevery]

Hi Shishir,

so the reason why the dimensions are not correct is because when your callback gets called the repeater contents has not be set yet (the ng:bind has not run) So the numbers you are getting are for an empty repeater, hence the discrepancy.

What, you want to do is to get the numbers after the page is computed. 

If this is a one time deal, then you can simply defer it thought window.setTimeout(workFn, 0); method. This well run your code after the eval is done and things have the right dimensions. This is a second time I ran into this problem, so maybe we will have a better way to do it in angular.

If you want to call a callback after every eval, but it should be last callback, you can do scope.$postEval(workFn); to register a function to run at the end of the eval cycle.

What is it that you are trying to achieve with this? If you want to have a generic center method you could do something like this.

angular.directive('ng:center', function(){

  return function(element) {

    function center(){

       element.left($(window).width()/2);

    }

    $(window).size(center);

    setTimeout(center, 0);

  };

});

--
You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Shishir Ramam]

Thanks Misko! 

the postEval hook was what I was looking for. 

next time, i'll go looking inside angular before asking...

-shishir

[Misko Hevery]

feel free to ask, that is what we are here for.

[Benjamin Polidore]

is setTimeout(workFn,0); still the best way to do this? 

Thanks,

bp

[Alan Smithee]

I've had similar timing problems, but with partial loading. Maybe Angular could fire an event similar to $includeContentLoaded once all the link functions have finished execution? Sort of a second "DOMready" once Angular thinks the page is not in a high state of flux.