AngularJS : existe-t-il une meilleure façon de gérer les changements dynamiques de hauteur de navigation ?

AngularJS : existe-t-il une meilleure façon de gérer les changements dynamiques de hauteur de navigation ?

Le problème séculaire du maintien d'une barre de navigation fixe avec le contenu à hauteur variable en dessous gêne les développeurs depuis un certain temps. Traditionnellement, une minuterie était utilisée pour vérifier périodiquement les changements de hauteur, déclenchant un ajustement de marge lorsqu'ils étaient détectés. Cependant, cette approche présente des inconvénients :

• Introduit une dépendance de minuterie
• Provoque un retard dans la réponse aux ajustements de hauteur

Une solution supérieure : Observateurs AngularJS

Une solution plus élégante et plus efficace consiste à exploiter les observateurs AngularJS :

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

} )

Dans cette implémentation :

• emHeightTarget surveille la propriété __height et met à jour la marge lorsque des changements se produisent.
• la directive emHeightSource enregistre un observateur qui met à jour __height avec la hauteur de l'élément actuel à chaque cycle $digest.

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!