Wie kann die Überwachungsfunktion von AngularJS die Überwachung von Navigationshöhenänderungen verbessern?

AngularJS: Eine effektivere Methode zur Überwachung von Höhenänderungen

Im Fall der Navigation mit variabler Höhe, bei der sich oben eine starr positionierte Navigationsleiste befindet Bei Inhalten mit einem von der Navigationshöhe abgeleiteten oberen Rand kann das asynchrone Laden von Daten zu Änderungen in der Navigationshöhe führen, was eine Anpassung des Inhaltsrands erforderlich macht.

Zuvor wurde ein timerbasierter Ansatz verwendet, um dieses Problem zu beheben . Allerdings brachte dieser Ansatz potenzielle Nachteile in Bezug auf Ästhetik und Latenz mit sich. Gibt es eine effektivere Möglichkeit, Höhenänderungen in AngularJS zu überwachen?

Ja, das gibt es. Durch die Nutzung der Überwachungsfunktion in AngularJS kann eine Lösung entwickelt werden, die eine verbesserte Reaktionsfähigkeit bietet und den Bedarf an Timern eliminiert. Dies funktioniert durch die Registrierung einer Überwachung in der emHeightSource-Direktive, die mit jedem $digest-Zyklus ausgelöst wird.

Innerhalb der Überwachung wird die Eigenschaft __height aktualisiert. Diese Eigenschaft wird dann von einer anderen Überwachung in der Direktive emHeightTarget überwacht. Wenn sich die Eigenschaft __height ändert, wird der Rand oben des Zielelements entsprechend angepasst.

Die verbesserte Implementierung mit watch:

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

} )

Dieser Ansatz stellt ein Selbst bereit -Inklusive Lösung, die die Mängel der zeitgesteuerten Methode behebt und eine reaktionsschnelle und nahtlose Erkennung von Höhenänderungen und Randanpassung gewährleistet.

Das obige ist der detaillierte Inhalt vonWie kann die Überwachungsfunktion von AngularJS die Überwachung von Navigationshöhenänderungen verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!