AngularJS を監視する高さでのタイマーの回避

AngularJS プログラマは、ナビゲーションの高さが動的である場合に、応答性の高いナビゲーションという課題に直面することがよくあります。これにより、ナビゲーションの高さの変化に応じてコンテンツのマージントップ値を調整する必要が生じます。

以前は、ナビゲーションの高さの変化を検出するためにタイマーが使用されていましたが、このアプローチには欠点がありました。コンテンツのマージントップの調整に遅れが生じます。

幸いなことに、AngularJS の $watch 機能を利用するという、より良いアプローチが存在します。タイマーの代わりに、ウォッチャーが「emHeightSource」に登録され、各 $digest サイクル中に呼び出されます。ウォッチャーは '__height' プロパティを更新します。

'emHeightTarget' では、別のウォッチャーが '__height' を監視し、それに応じてマージントップの値を更新し、コンテンツのマージントップがスムーズに、ナビゲーションと同期して変更されるようにします。 height.

ウォッチャーを使用して洗練されたコードは次のとおりです:

/*
 * 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();
            } );
        }
    }

} )