Bagaimanakah AngularJS $watch Boleh Menggantikan Pemasa dalam Pelarasan Ketinggian Navigasi Dinamik?

Mengelakkan Pemasa dalam Ketinggian Menonton AngularJS

Pengaturcara AngularJS sering menghadapi cabaran navigasi responsif apabila ketinggian navigasi adalah dinamik. Ini membawa kepada keperluan untuk melaraskan nilai atas margin kandungan sebagai tindak balas kepada perubahan ketinggian navigasi.

Sebelum ini, pemasa digunakan untuk mengesan perubahan ketinggian navigasi, tetapi pendekatan ini mempunyai kelemahan: penggunaan pemasa dan kelewatan dalam melaraskan margin atas kandungan.

Nasib baik, pendekatan yang lebih baik wujud: memanfaatkan kefungsian $watch AngularJS. Daripada pemasa, pemerhati didaftarkan dalam 'emHeightSource,' yang digunakan semasa setiap kitaran $digest. Pemerhati mengemas kini sifat '__height'.

Dalam 'emHeightTarget,' pemerhati lain memantau '__height' dan mengemas kini nilai atas margin atas sewajarnya, memastikan bahawa margin atas kandungan berubah dengan lancar dan selari dengan navigasi ketinggian.

Berikut ialah kod yang diperhalusi menggunakan pemerhati:

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

} )

Atas ialah kandungan terperinci Bagaimanakah AngularJS $watch Boleh Menggantikan Pemasa dalam Pelarasan Ketinggian Navigasi Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!