AngularJS のウォッチ機能はナビゲーションの高さの変化の監視をどのように改善できるでしょうか?

AngularJS: 高さの変化を監視するためのより効果的な方法

高さが可変のナビゲーションの場合、上部に固定的に配置されたナビゲーション バーが配置されます。ナビゲーションの高さから派生したマージントップを持つコンテンツでは、非同期データの読み込みによりナビゲーションの高さが変化する可能性があり、コンテンツのマージンの調整が必要になります。

以前は、この問題に対処するためにタイマーベースのアプローチが採用されていました。 。ただし、このアプローチでは、美しさと遅延に関連する潜在的な欠点が生じました。 AngularJS で高さの変化を監視するより効果的な方法はありますか?

はい、あります。 AngularJS の監視機能を利用することで、応答性が向上し、タイマーの必要性を排除するソリューションを考案できます。これは、各 $digest サイクルでトリガーされる emHeightSource ディレクティブにウォッチを登録することで機能します。

ウォッチ内で、__height プロパティが更新されます。このプロパティは、emHeightTarget ディレクティブ内の別の監視によって監視されます。 __height プロパティが変更されると、ターゲット要素のマージン上部がそれに応じて調整されます。

watch を使用した改良された実装:

/*
 * 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 のウォッチ機能はナビゲーションの高さの変化の監視をどのように改善できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。