Éviter les minuteries lors de la surveillance de la hauteur pour AngularJS

Les programmeurs AngularJS sont souvent confrontés au défi d'une navigation réactive lorsque la hauteur de navigation est dynamique. Cela conduit à la nécessité d'ajuster la valeur de la marge supérieure du contenu en réponse aux changements de hauteur de navigation.

Auparavant, un minuteur était utilisé pour détecter les changements de hauteur de navigation, mais cette approche présentait des inconvénients : l'utilisation d'un minuteur et un retard dans l'ajustement de la marge supérieure du contenu.

Heureusement, une meilleure approche existe : tirer parti de la fonctionnalité $watch d'AngularJS. Au lieu d'un minuteur, un observateur est enregistré dans « emHeightSource », qui est invoqué lors de chaque cycle $digest. L'observateur met à jour la propriété « __height ».

Dans « emHeightTarget », un autre observateur surveille « __height » et met à jour la valeur de la marge supérieure en conséquence, garantissant que la marge supérieure du contenu change de manière fluide et synchronisée avec la navigation. height.

Voici le code affiné à l'aide des observateurs :

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

} )