角度嵌套指令排序

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); 
     } 
    }; 
}); 

他們都獨立開展工作，麻煩的是，當他們被嵌套，對準垂直指令不工作，即時通訊假設這是因爲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); 
      }); 
     }); 
    }, 
}; 
});