AngularJS は高さの変更をどのように効率的に処理できるのでしょうか?

高さの変更に対する AngularJS の応答の改善

タイマーの使用など、AngularJS で高さの変更を処理する従来のアプローチでは、遅延や非効率などの欠点が生じる可能性があります。より効果的な解決策は、AngularJS の組み込み watch机制を利用することです。

新しく改良されたディレクティブ:

emHeightTarget

emHeightTarget ディレクティブは監視を登録します。 __height プロパティで、ダイジェスト サイクルごとに emHeightSource ディレクティブによって更新されます。 __height プロパティが変更されると、ディレクティブは新しい高さの値に基づいてターゲット要素のマージントップ スタイルを更新します。

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