Угловой вложенный директивный заказ

Question

Мне нелегко найти информацию о заказе директив и их обновлении свойств css.

например, у меня есть две директивы, одна из которых позволяет установить элемент в полноэкранном режиме и один для выравнивания содержимого по вертикали.

app.directive('fullscreenElement', function() { 
    return { 
     restrict: "A", 
     link: function(scope,element,attrs){  
      $(element).each(function(){ 
       $(this).css('height', $(window).height()); 
      }); 
     } 
    }; 
}); 

app.directive('alignVertical', function() { 
    return { 
     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); 
     } 
    }; 
}); 

Они оба работают independantly, беда в том, когда они вложены, выравнивать-вертикальную директиву не работает, им предполагает, что это происходит потому, что высота CSS не была установлена ​​еще? как я могу убедиться, что он установлен до запуска директивы alignVertical? любые советы для написания этих двух директив более угловатым образом были бы оценены.

это работает:

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

это не работает (содержание оленья кожа центр вертикально, даже если высота заголовка теперь весь экран):

<header fullscreen-element>   
    <div align-vertical> 
      the header element is now fullscreen height but this content is *not* centered vertically 
    </div> 
</header> 

благодаря

Answer 1

выяснял решение , разместив его здесь, в случае, если кто-нибудь найдет его полезным.

Хитрость заключается в использовании scope.watch и scope.evalAsync для контроля изменений высоты в родительском контейнере и запуска их после завершения рендеринга.

app.directive('alignVertical', function() { 
return { 
    link: function($scope, element, attrs) { 
     // Trigger when parent element height changes changes 
     var watch = $scope.$watch(function() { 
      return element.parent().height; 
     }, function() { 
      // wait for templates to render 
      $scope.$evalAsync(function() { 
       // directive runs here after render. 
       var that = $(element); 
       var height = that.height(); 
       var parentHeight = that.parent().height(); 
       var padAmount = (parentHeight/2) - (height/2); 
       that.css('padding-top', padAmount); 
      }); 
     }); 
    }, 
}; 
});