AngularJS: 동적 탐색 높이 변경을 처리하는 더 좋은 방법이 있습니까?

AngularJS: 동적 탐색 높이 변경을 처리하는 더 좋은 방법이 있습니까?

고정 탐색 표시줄을 유지하는 오래된 문제 그 아래의 가변 높이 콘텐츠는 한동안 개발자를 괴롭혔습니다. 전통적으로 타이머는 높이 변화를 주기적으로 확인하고 감지되면 마진 조정을 트리거하는 데 사용되었습니다. 그러나 이 접근 방식에는 단점이 있습니다.

• 타이머 종속성을 도입합니다
• 높이 조정에 대한 응답이 지연됩니다

우수한 솔루션: AngularJS 감시자

더 우아하고 효율적인 솔루션은 AngularJS 감시자를 활용하는 것입니다.

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

} )

이 구현에서는:

• emHeightTarget 지시문은 __height 속성을 감시하고 변경 사항이 발생할 때 여백을 업데이트합니다.
• emHeightSource 지시문은 $digest 주기마다 현재 요소의 높이로 __height를 업데이트하는 감시자를 등록합니다.

이 접근 방식을 사용하면 타이머가 필요 없으며 보다 효율적이고 응답성이 뛰어난 솔루션을 제공합니다.

위 내용은 AngularJS: 동적 탐색 높이 변경을 처리하는 더 좋은 방법이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!