タイマーの使用など、AngularJS で高さの変更を処理する従来のアプローチでは、遅延や非効率などの欠点が生じる可能性があります。より効果的な解決策は、AngularJS の組み込み watch机制を利用することです。
新しく改良されたディレクティブ:
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 ディレクティブは、次の間隔で実行される監視を登録します。ダイジェストサイクル。 __height プロパティを要素の現在の高さで更新します。
<code class="javascript">.directive( 'emHeightSource', function() { return { link: function( scope, elem, attrs ) { scope.$watch( function() { scope.__height = elem.height(); } ); } } } )</code>
利点:
以上がAngularJS は高さの変更をどのように効率的に処理できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。