css - Angular nested directive ordering -

css - Angular nested directive ordering -

i having hard time finding info on ordering of directives , updating of css properties.

for example, have 2 directives, 1 set element total screen height, , 1 align content vertically.

app.directive('fullscreenelement', function() { homecoming { restrict: "a", link: function(scope,element,attrs){ $(element).each(function(){ $(this).css('height', $(window).height()); }); } }; }); app.directive('alignvertical', function() { homecoming { restrict: "a", link: function(scope,element,attrs){ var height = $(element).height(); var parentheight = $(element).parent().height(); var padamount = (parentheight / 2) - (height / 2); $(element).css('padding-top', padamount); } }; });

they both work independantly, problem when nested, align-vertical directive doesnt work, im assuming because css height hasn't been set yet? how create sure set before alignvertical directive runs? tips writing these 2 directives in more angular way appreciated.

this works:

<header style="height:800px"> <div align-vertical> content centered vertically expected </div> </header>

this doesn't work (content doesnt center vertically, though header height fullscreen):

<header fullscreen-element> <div align-vertical> header element fullscreen height content *not* centered vertically </div> </header>

thanks

figured out solution, posting here in case finds helpful.

the trick utilize scope.watch , scope.evalasync monitor changes of height parent container , run them after rendering complete.

app.directive('alignvertical', function() { homecoming { link: function($scope, element, attrs) { // trigger when parent element height changes changes var watch = $scope.$watch(function() { homecoming element.parent().height; }, function() { // wait templates render $scope.$evalasync(function() { // directive runs here after render. var = $(element); var height = that.height(); var parentheight = that.parent().height(); var padamount = (parentheight / 2) - (height / 2); that.css('padding-top', padamount); }); }); }, }; });

css angularjs angularjs-directive order