AngularJS 如何有效率地處理高度變化？

改進AngularJS 對高度變化的反應

在AngularJS 中處理高度變化的傳統方法（例如使用計時器）可能會帶來延遲和低效率等缺點。更有效的解決方案是利用 AngularJS 的內建監視機制。

新的和改進的指令：

emHeightTarget

emHeightTarget 指令註冊一個監視在__height 屬性上，該屬性由emHeightSource 指令在每一個指令個摘要周期進行更新。當 __height 屬性變更時，指令會根據新的高度值更新目標元素的 margin-top 樣式。

<code class="javascript">.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

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

emHeightSource

emHeightSource 指令註冊一個執行每個消化循環。它以元素的當前高度更新 __height 屬性。

<code class="javascript">.directive( 'emHeightSource', function() {

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

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

} )</code>

優點：

• 獨立：解決方案純粹駐留在所涉及的HTML 元素/指令中，而不依賴外部資料載入程式碼。
• 沒有計時器或延遲： 監視機制由 AngularJS 原生觸發，消除了醜陋的需要定時器，減少內容調整的延遲。
• 高效：手錶機制僅在實際高度變化時觸發，最大限度地提高性能。

以上是AngularJS 如何有效率地處理高度變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！