AngularJS: Gibt es eine bessere Möglichkeit, mit dynamischen Navigationshöhenänderungen umzugehen?

AngularJS: Gibt es eine bessere Möglichkeit, mit dynamischen Navigationshöhenänderungen umzugehen?

Das uralte Problem der Aufrechterhaltung einer festen Navigationsleiste mit Inhalte mit variabler Höhe darunter haben Entwickler seit einiger Zeit geplagt. Traditionell wurde ein Timer verwendet, um regelmäßig Höhenänderungen zu prüfen und bei Erkennung eine Randanpassung auszulösen. Dieser Ansatz hat jedoch Nachteile:

• Führt eine Timer-Abhängigkeit ein
• Verursacht eine Verzögerung bei der Reaktion auf Höhenanpassungen

Eine überlegene Lösung: AngularJS-Watcher

Eine elegantere und effizientere Lösung ist die Nutzung von AngularJS-Watchern:

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

} )

In dieser Implementierung:

• emHeightTarget-Direktive überwacht die __height-Eigenschaft und aktualisiert den Rand, wenn Änderungen auftreten.
• emHeightSource-Direktive registriert einen Beobachter, der __height in jedem $digest-Zyklus mit der Höhe des aktuellen Elements aktualisiert.

Dieser Ansatz macht einen Timer überflüssig und bietet eine schlankere und reaktionsfähigere Lösung.

Das obige ist der detaillierte Inhalt vonAngularJS: Gibt es eine bessere Möglichkeit, mit dynamischen Navigationshöhenänderungen umzugehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!