تجنب الموقتات في مراقبة الارتفاع لـ AngularJS

غالبًا ما يواجه مبرمجو AngularJS تحدي التنقل سريع الاستجابة عندما يكون ارتفاع التنقل ديناميكيًا. يؤدي هذا إلى الحاجة إلى ضبط قيمة أعلى هامش المحتوى استجابة لتغيرات ارتفاع التنقل.

في السابق، تم استخدام مؤقت لاكتشاف تغييرات ارتفاع التنقل، ولكن هذا الأسلوب كان له عيوب: استخدام مؤقت و تأخير في ضبط أعلى هامش المحتوى.

لحسن الحظ، يوجد نهج أفضل: الاستفادة من وظيفة $watch الخاصة بـ AngularJS. بدلاً من المؤقت، يتم تسجيل المراقب في 'emHeightSource'، والذي يتم استدعاؤه خلال كل دورة ملخص $. يقوم المراقب بتحديث خاصية "__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();
            } );
        }
    }

} )