Evitar temporizadores en altura para observar AngularJS

Los programadores de AngularJS a menudo enfrentan el desafío de la navegación receptiva cuando la altura de navegación es dinámica. Esto lleva al requisito de ajustar el valor del margen superior del contenido en respuesta a los cambios en la altura de navegación.

Anteriormente, se usaba un temporizador para detectar cambios en la altura de navegación, pero este enfoque tenía desventajas: el uso de un temporizador y un retraso en el ajuste del margen superior del contenido.

Afortunadamente, existe un enfoque mejor: aprovechar la funcionalidad $watch de AngularJS. En lugar de un temporizador, se registra un observador en 'emHeightSource', que se invoca durante cada ciclo de $digest. El observador actualiza la propiedad '__height'.

En 'emHeightTarget', otro observador monitorea '__height' y actualiza el valor del margen superior en consecuencia, asegurando que el margen superior del contenido cambie sin problemas y en sincronía con la navegación. altura.

Aquí está el código refinado usando observadores:

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

} )