Angular 내 Directive에서 input tag에 focus 줄 때 팁

jQuery에서 동적으로 생성된 <input>tag에 바로 focus를 주고 싶다면 손쉽게 가능하다. 동적으로 태그를 생성하는 것은 동기 방식이기 때문에 생성하고, <input>을 Selector로 잡아서 .focus()만 주면 끝난다.

이렇게 보면, 정말 jQuery가 나쁘지 않는 녀석이긴 하지만, Angular를 쓴다면 jqlite 정도만 사용할 수 있고, 대부분의 뷰 렌더링이 비동기로 처리되다 보니, 위와 같은 경우에서 언제 .focus()를 부여할지 정하기가 어렵다. 이러한 경우에는 일반적으로 Controller 단에서 처리하기 힘들고, Directive(이하 디렉티브) 단에서 처리해야 한다.

ng-if 경우에 디렉티브를 Attribute로 넣어주면, ng-if로 화면에 렌더링 될 때마다 그 디렉티브를 실행하게 된다.

app.directive('focusMe', function($timeout) {
  return function(scope, element, attrs) {
      $timeout(function() {
        element[0].focus();
      });
    };
});

위와 같이 처리하면 되는 데, 이상한 점이 보일 것이다. 바로 $timeout인데, 이게 있어야 제대로 .focus()가 동작한다. 렌더링되는 시간이 있어야 하기 때문이다. 저게 없다면, -내 경우에- PC에서는 잘 동작되나, 모바일에서는 가상 키보드가 뜨다가 바로 사라지는 버그가 생겼었다.