Comment AngularJS peut-il gérer efficacement les changements de hauteur ?

Amélioration de la réponse d'AngularJS aux changements de hauteur

Les approches traditionnelles de gestion des changements de hauteur dans AngularJS, telles que l'utilisation de minuteries, peuvent introduire des inconvénients tels que des retards et des inefficacités. Une solution plus efficace consiste à exploiter la surveillance intégrée d'AngularJS.

Directive nouvelle et améliorée :

emHeightTarget

La directive emHeightTarget enregistre une surveillance sur la propriété __height, qui est mise à jour par la directive emHeightSource à chaque cycle de résumé. Lorsque la propriété __height change, la directive met à jour le style de marge supérieure de l'élément cible en fonction de la nouvelle valeur de hauteur.

<code class="javascript">.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );
            } );
        }
    }
} )</code>

emHeightSource

La directive emHeightSource enregistre une surveillance qui exécute chaque cycle de digestion. Il met à jour la propriété __height avec la hauteur actuelle de l'élément.

<code class="javascript">.directive( 'emHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )</code>

Avantages :

• Autonome : Le La solution réside uniquement dans les éléments/directives HTML impliqués, sans s'appuyer sur du code de chargement de données externe.
• Pas de minuteries ni de retards : La montre机制 est déclenchée nativement par AngularJS, éliminant ainsi le besoin de tâches laides. minuteries et réduisant le délai d'ajustement du contenu.
• Efficace : La montre机制 ne se déclenche que lorsqu'un changement de hauteur réel se produit, maximisant les performances.

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!