css - Angular nested directive ordering -

I am having difficulty finding any information on instructions and updating the CSS properties.

  app.directive ('fullscreenElement', function () {return {restrict: "a", link: function (scope, element) at (function () ($ (this). Css ('altitude', $ (window)). ();});}};}); {}: "A", link: function (scope, element, ethers) {var height = $ (element) Height (); var padmount = (parentheit / 2) - (height / 2); $ (element) .css ('padding-top', padmount );}};});  

Both of them work independently, the trouble occurs when they are nested, the alignment-vertical instructions do not work, assuming that CSS height is not yet determined ? How do I make sure that this alignVertical Directive is set before the run?

This works:

  & lt; Header style = "height: 800px" & gt; & Lt; Div alignment-vertical & gt; This content is vertically centered & lt; / Div & gt; & Lt; / Header & gt;  

This does not work (content is not a vertical center, though the header height is now fullscreen):

  & lt; Title Fullscreen-element & gt; & Lt; Div alignment-vertical & gt; The header element is now fullscreen height but this content is not * * centered * pending & lt; / Div & gt; & Lt; / Header & gt;  

Thanks

A solution is detected, post it here In case anyone find it helpful

To use the trick, use scope.watch and scope.evalAynync to monitor changes in height of parent container and run them after completion of rendering.

  app.directive ('align vertical', function () {return} {return} {{link: function ($ scope, element, attrs) {// trigger when changing parent element height Then change var watch = $ scope. $ Watch (function () {return element.parent (). Height;}, function () {// $ wait for templates to render scope. $ EvalAsync (function () {// Instructions run here after directing. Var that = $ (element); var height = That.height (); var parentHeight = that.parent (); height (); var padmount = (parentheit / 2) - (height / 2); that.css ('padding-top', pad amount);});});} };});