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:
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>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:
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!
