AngularJS의 높이 감시에서 타이머 방지

AngularJS 프로그래머는 탐색 높이가 동적일 때 반응형 탐색 문제에 직면하는 경우가 많습니다. 이로 인해 탐색 높이 변경에 따라 콘텐츠의 여백 상단 값을 조정해야 하는 요구 사항이 발생합니다.

이전에는 타이머를 사용하여 탐색 높이 변경을 감지했지만 이 접근 방식에는 단점이 있었습니다. 콘텐츠의 여백 상단 조정이 지연됩니다.

다행히도 더 나은 접근 방식이 있습니다: AngularJS의 $watch 기능을 활용하는 것입니다. 타이머 대신 각 $digest 주기 동안 호출되는 'emHeightSource'에 감시자가 등록됩니다. 감시자는 '__height' 속성을 업데이트합니다.

'emHeightTarget'에서 다른 감시자는 '__height'를 모니터링하고 그에 따라 margin-top 값을 업데이트하여 콘텐츠의 margin-top이 원활하게 변경되고 탐색과 동기화되는지 확인합니다. height.

감시자를 사용하여 세련된 코드는 다음과 같습니다.

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

} )