Evitando temporizadores na observação de altura para AngularJS

Os programadores AngularJS geralmente enfrentam o desafio da navegação responsiva quando a altura da navegação é dinâmica. Isso leva à necessidade de ajustar o valor da margem superior do conteúdo em resposta às alterações na altura da navegação.

Anteriormente, um cronômetro era usado para detectar alterações na altura da navegação, mas essa abordagem tinha desvantagens: o uso de um cronômetro e um atraso no ajuste da margem superior do conteúdo.

Felizmente, existe uma abordagem melhor: aproveitar a funcionalidade $watch do AngularJS. Em vez de um cronômetro, um observador é registrado em 'emHeightSource', que é invocado durante cada ciclo $digest. O inspetor atualiza a propriedade '__height'.

Em 'emHeightTarget', outro inspetor monitora '__height' e atualiza o valor da margem superior de acordo, garantindo que a margem superior do conteúdo mude suavemente e em sincronia com a navegação height.

Aqui está o 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();
            } );
        }
    }

} )