使用angularjs更改基於頁眉高度的頂部填充

Question

我有一個固定頁眉和一箇中間段。當頁面大小調整或在較小的屏幕上打開時，頁眉高度增加並因此在中間部分擴展。我想以angularjs方式動態設置padding-top的值。我知道如何在jQuery中做到這一點，但這對我來說並不合適。

HTML：

<div id="mainPage"> 
    <div id="header" ng-controller="DecorpotCtrl"> 

    </div> 
    <!-- End of div = header--> 

    <div ui-view class="mid"></div> 

</div> 

CSS：

#header { 
    height: auto; 
    z-index: 20; 
    background-color: white; 
    position: fixed; 
    width: 100%; 
} 

.mid { 
    height: 84%; 
    background-color: white; 
    padding-top: 5%; 
} 

或者有這樣做的任何其他純CSS方式。

Answer 1

一般來說，我想說的角度來說，或者更精確地「一」角的方式，就是讓一個自定義的指令，並盡一切在那裏，使用jQuery或任何你想要的:)

只記得解開範圍的$ destroy事件中的任何自定義內容！

link: function (scope, element, attrs) { 
    function onResize() { 

    }; 
    window.addEventListener("resize", onResize); 

    scope.$on("$destroy", function() { 
     window.removeEventListener("resize", onResize); 
    }); 
}