Comment AngularJS $watch peut-il remplacer les minuteries dans le réglage dynamique de la hauteur de navigation ?

É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, une minuterie était utilisée pour détecter les changements de hauteur de navigation, mais cette approche présentait des inconvénients : l'utilisation d'une minuterie 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 en douceur et en synchronisation avec la navigation. hauteur.

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

} )

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!