AngularJS $watch 如何取代動態導航高度調整中的計時器？

避免 AngularJS 的高度監視計時器

當導航高度是動態時，AngularJS 程式設計師經常面臨響應式導航的挑戰。這就導致需要根據導航高度的變化來調整內容的 margin-top 值。

以前，使用計時器來偵測導航高度的變化，但這種方法有缺點：使用計時器和調整內容的 margin-top 時出現延遲。

幸運的是，有更好的方法：利用 AngularJS 的 $watch 功能。在「emHeightSource」中註冊了一個觀察程序，而不是計時器，該觀察程序在每個 $digest 週期期間被呼叫。觀察者更新 '__height' 屬性。

在 'emHeightTarget' 中，另一個觀察者監視 '__height' 並相應更新 margin-top 值，確保內容的 margin-top 平滑變化並與導航同步高度。

這是使用觀察者的精煉程式碼：

/*
 * 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();
            } );
        }
    }

} )

以上是AngularJS $watch 如何取代動態導航高度調整中的計時器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！