AngularJS：有更好的方法來處理動態導航高度變化嗎？

AngularJS：有更好的方法來處理動態導航高度變化嗎？

維護固定導覽列的老問題一段時間以來，其下方的可變高度內容一直困擾著開發人員。傳統上，計時器用於定期檢查高度變化，並在檢測到時觸發邊距調整。然而，這種方法有缺點：

• 引入計時器依賴
• 導致響應高度調整延遲

高級解決方案： AngularJS 觀察者

更優雅、更有效率的解決方案是利用AngularJS 觀察者：

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

} )

在此實作中：

• emHeightTarget
指令監視__height 屬性並在發生變更時更新邊距。
• emHeightSource
指令註冊一個觀察器，該觀察器在每個 $digest 週期中用當前元素的高度更新 __height。

這種方法消除了對計時器的需求，並提供了更簡化和響應更快的解決方案。

以上是AngularJS：有更好的方法來處理動態導航高度變化嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！