AngularJS 커스텀 디렉티브로 목록의 텍스트 입력란에 포커스 설정하기

AngularJS로 목록의 텍스트 입력란에 포커스 설정하기

ng-repeat로 렌더링된 목록에서 새로 추가된 항목의 텍스트 입력란에 자동으로 포커스를 맞추려면, 커스텀 디렉티브를 활용하는 것이 가장 깔끔한 방법입니다. 다음 코드를 프로젝트에 적용해 보세요.

newApp.directive('focus', function () {
    return function (scope, element, attrs) {
        attrs.$observe('focus', function (newValue) {
            newValue === 'true' && element[0].focus();
        });
    }
});

디렉티브의 동작 원리

이 디렉티브는 $observe 메서드를 사용해 focus 속성값의 변화를 감시합니다. 속성값이 문자열 'true'가 되는 순간 해당 DOM 요소에 포커스를 설정합니다. {{ }} 보간 표현식으로 바인딩된 값은 비동기적으로 변경되기 때문에, $observe를 활용하면 값이 갱신될 때마다 정확하게 반응할 수 있다는 점이 핵심입니다.

HTML 사용 예시

<input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
class="input-xlarge" />

focus="{{cue.isNewest}}"처럼 스코프 변수를 바인딩하면, 해당 항목이 새 항목일 때(isNewest 값이 true일 때) 입력란에 커서가 자동으로 위치합니다. 이 방식은 ng-repeat로 생성된 여러 입력란 중 조건에 맞는 하나만 선택적으로 포커스를 지정하고 싶을 때 특히 유용합니다.