Bagaimanakah Fungsi Jam Tangan AngularJS Dapat Meningkatkan Pemantauan Perubahan Ketinggian Navigasi?

AngularJS: Kaedah yang Lebih Berkesan untuk Pemantauan Perubahan Ketinggian

Dalam kes navigasi ketinggian berubah-ubah, di mana bar navigasi berkedudukan tegar berada di atas kandungan dengan jidar atas yang diperoleh daripada ketinggian navigasi, pemuatan data tak segerak boleh membawa kepada perubahan dalam ketinggian navigasi, yang memerlukan pelarasan jidar kandungan.

Sebelum ini, pendekatan berasaskan pemasa telah digunakan untuk menangani isu ini . Walau bagaimanapun, pendekatan ini memperkenalkan potensi kelemahan yang berkaitan dengan estetika dan kependaman. Adakah terdapat cara yang lebih berkesan untuk memantau perubahan ketinggian dalam AngularJS?

Ya, ada. Dengan menggunakan keupayaan jam tangan dalam AngularJS, penyelesaian boleh direka yang menawarkan responsif yang dipertingkatkan dan menghapuskan keperluan untuk pemasa. Ini berfungsi dengan mendaftarkan jam tangan dalam arahan emHeightSource yang dicetuskan dengan setiap kitaran $digest.

Dalam jam tangan, sifat __height dikemas kini. Harta ini kemudiannya dipantau oleh jam tangan lain dalam arahan emHeightTarget. Apabila sifat __height berubah, margin atas elemen sasaran dilaraskan sewajarnya.

Pelaksanaan yang dipertingkatkan menggunakan jam tangan:

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

} )

Pendekatan ini memberikan kendiri -penyelesaian yang mengandungi yang menangani kelemahan kaedah berasaskan pemasa, memastikan pengesanan perubahan ketinggian yang responsif dan lancar serta pelarasan margin.

Atas ialah kandungan terperinci Bagaimanakah Fungsi Jam Tangan AngularJS Dapat Meningkatkan Pemantauan Perubahan Ketinggian Navigasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!