Wie kann AngularJS Höhenänderungen effizient bewältigen?

Verbesserung der AngularJS-Reaktion auf Höhenänderungen

Traditionelle Ansätze zum Umgang mit Höhenänderungen in AngularJS, wie z. B. die Verwendung von Timern, können Nachteile wie Verzögerungen und Ineffizienzen mit sich bringen. Eine effektivere Lösung besteht darin, die integrierte Überwachungsfunktion von AngularJS zu nutzen.

Neue und verbesserte Richtlinie:

emHeightTarget

Die emHeightTarget-Anweisung registriert eine Überwachung auf der __height-Eigenschaft, die durch die emHeightSource-Direktive in jedem Digest-Zyklus aktualisiert wird. Wenn sich die __height-Eigenschaft ändert, aktualisiert die Direktive den Rand-Oben-Stil des Zielelements basierend auf dem neuen Höhenwert.

<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

Die emHeightSource-Direktive registriert eine Überwachung, die alle ausführt Verdauungszyklus. Es aktualisiert die __height-Eigenschaft mit der aktuellen Höhe des Elements.

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

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

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

} )</code>

Vorteile:

• Eigenständig: Die Die Lösung liegt ausschließlich in den beteiligten HTML-Elementen/Anweisungen, ohne auf externen Code zum Laden von Daten angewiesen zu sein.
• Keine Timer oder Verzögerungen: Die Überwachung wird nativ von AngularJS ausgelöst, sodass keine hässlichen Funktionen erforderlich sind Timer und Reduzierung der Verzögerung bei der Inhaltsanpassung.
• Effizient: Die Uhr löst nur aus, wenn eine tatsächliche Höhenänderung auftritt, wodurch die Leistung maximiert wird.

Das obige ist der detaillierte Inhalt vonWie kann AngularJS Höhenänderungen effizient bewältigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!