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 中国語 Web サイトの他の関連記事を参照してください。