Избегание таймеров при наблюдении за высотой для AngularJS

Программисты AngularJS часто сталкиваются с проблемой адаптивной навигации, когда высота навигации является динамической. Это приводит к необходимости корректировать значение верхнего края контента в ответ на изменения высоты навигации.

Ранее для обнаружения изменений высоты навигации использовался таймер, но у этого подхода были недостатки: использование таймера и задержка в настройке поля отступа контента.

К счастью, существует лучший подход: использование функции $watch AngularJS. Вместо таймера в 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();
            } );
        }
    }

} )