AngularJS는 어떻게 높이 변화를 효율적으로 처리할 수 있나요?

높이 변경에 대한 AngularJS 응답 개선

타이머 사용과 같이 AngularJS에서 높이 변경을 처리하는 기존 접근 방식에는 지연 및 비효율성과 같은 단점이 발생할 수 있습니다. 더 효과적인 솔루션은 AngularJS에 내장된 watch를 활용하는 것입니다.

새롭게 개선된 지시어:

emHeightTarget

emHeightTarget 지시어는 watch를 등록합니다. __height 속성은 다이제스트 주기마다 emHeightSource 지시어에 의해 업데이트됩니다. __height 속성이 변경되면 지시문은 새 높이 값을 기반으로 대상 요소의 margin-top 스타일을 업데이트합니다.

<code class="javascript">.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );
            } );
        }
    }
} )</code>

emHeightSource

emHeightSource 지시문은 소화주기. __height 속성을 요소의 현재 높이로 업데이트합니다.

<code class="javascript">.directive( 'emHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )</code>

장점:

• 자체 포함: 솔루션은 외부 데이터 로딩 코드에 의존하지 않고 관련 HTML 요소/지시문 내에만 상주합니다.
• 타이머나 지연 없음: 시계 제조는 AngularJS에 의해 기본적으로 실행되므로 보기 흉한 코드가 필요하지 않습니다. 타이머를 설정하고 콘텐츠 조정 지연을 줄입니다.
• 효율성: 시계는 실제 높이 변화가 발생할 때만 작동하여 성능을 극대화합니다.

위 내용은 AngularJS는 어떻게 높이 변화를 효율적으로 처리할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!