AngularJS 的 Watch 功能如何改善導航高度變化監控？

AngularJS：更有效的高度變化監控方法

在可變高度導航的情況下，剛性定位的導航欄位於頂部內容的margin-top 源自於導航高度，非同步資料載入會導致導航高度變化，需要調整內容邊距。

之前使用基於計時器的方法來解決此問題。然而，這種方法帶來了與美觀和延遲相關的潛在缺點。 AngularJS 有沒有更有效的方法來監控高度變化？

是的，有。透過利用 AngularJS 中的監視功能，可以設計一種解決方案，提供增強的回應能力並消除對計時器的需求。這是透過在每個 $digest 週期觸發的 emHeightSource 指令中註冊一個監視來實現的。

在監視內，__height 屬性會更新。然後，此屬性由 emHeightTarget 指令中的另一個監視進行監視。當 __height 屬性改變時，目標元素的 margin-top 也會隨之調整。

使用watch 的改進實現：

/*
 * Get notified when height changes and change margin-top
 */
.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );
            } );
        }
    }
} )

/*
 * Checks every $digest for height changes
 */
.directive( 'emHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )

這種方法提供了一個self -包含的解決方案解決了基於計時器的方法的缺點，確保響應靈敏且無縫的高度變化檢測和邊距調整。

以上是AngularJS 的 Watch 功能如何改善導航高度變化監控？的詳細內容。更多資訊請關注PHP中文網其他相關文章！