Wie kann AngularJS $watch Timer bei der dynamischen Navigationshöhenanpassung ersetzen?

Vermeiden von Timern bei der Höhenüberwachung für AngularJS

AngularJS-Programmierer stehen oft vor der Herausforderung einer reaktionsfähigen Navigation, wenn die Navigationshöhe dynamisch ist. Dies führt dazu, dass der Wert des oberen Rands des Inhalts als Reaktion auf Änderungen der Navigationshöhe angepasst werden muss.

Früher wurde ein Timer verwendet, um Änderungen der Navigationshöhe zu erkennen, aber dieser Ansatz hatte Nachteile: die Verwendung eines Timers und eine Verzögerung bei der Anpassung des oberen Rands des Inhalts.

Glücklicherweise gibt es einen besseren Ansatz: die Nutzung der $watch-Funktionalität von AngularJS. Anstelle eines Timers wird in „emHeightSource“ ein Beobachter registriert, der bei jedem $digest-Zyklus aufgerufen wird. Der Beobachter aktualisiert die Eigenschaft „__height“.

In „emHeightTarget“ überwacht ein anderer Beobachter „__height“ und aktualisiert den Wert für den oberen Rand entsprechend, um sicherzustellen, dass sich der obere Rand des Inhalts reibungslos und synchron mit der Navigation ändert Höhe.

Hier ist der verfeinerte Code mit Beobachtern:

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

} )

Das obige ist der detaillierte Inhalt vonWie kann AngularJS $watch Timer bei der dynamischen Navigationshöhenanpassung ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!