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, dieser Ansatz hatte jedoch 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();
            } );
        }
    }

} )