> 웹 프론트엔드 > CSS 튜토리얼 > AngularJS: 동적 탐색 높이 변경을 처리하는 더 좋은 방법이 있습니까?

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

Susan Sarandon
풀어 주다: 2024-11-04 08:15:30
원래의
1012명이 탐색했습니다.

AngularJS: Is There a Better Way to Handle Dynamic Navigation Height Changes?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿