ホームページ > ウェブフロントエンド > CSSチュートリアル > AngularJS: 動的なナビゲーションの高さの変更を処理するより良い方法はありますか?

AngularJS: 動的なナビゲーションの高さの変更を処理するより良い方法はありますか?

Susan Sarandon
リリース: 2024-11-04 08:15:30
オリジナル
1011 人が閲覧しました

AngularJS: Is There a Better Way to Handle Dynamic Navigation Height Changes?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート