앵귤러에서 키보드 이벤트 처리 방법

앵귤러를 기반으로 작성된 웹 애플리케이션에서는 jQuery 기반의 코드를 통해 DOM에 존재하는 요소를 선택한 뒤 조작한다고 해도 $scope.apply()를 해주지 않으면 해당 scope에 조작 결과가 바인딩 되지 않는 일이 일어날 수 있습니다.

 

그래서 현재 작업하고 있는 모든 코드들은 directive를 사용하여 각각의 view에 대한 isolate scope를 모두 생성해 주는 형태로 코드를 작성하고 있는 상황인데요, 여기서도 현재 조작해야 할 DOM의 요소를 앵귤러의 코드를 통해 처리할 수 있게 됩니다.

 

앵귤러에서는 키 이벤트를 어떻게 처리할 수 있을까요?

ng-keyup, ng-keydown, ng-keypress과 같은 디렉티브를 이용하면 간단하게 사용할 수 있습니다.

 

현재 scope 내에 함수를 하나 선언해 놓고, 그쪽으로 앵귤러 이벤트 서비스를 인자로 넘겨주는 형태로 작업하면 매우 간단하게 처리할 수 있습니다!

 

아래와 같이 코드를 작성하면, 넘어오는 이벤트를 확인할 수 있으며 그 이벤트를 scope 내에서 핸들링 할 수 있게 됩니다.

 

<input type="text" ng-keypress="search(event=$event)" />

$scope.search = function(event){
   console.log(event); //jQuery의 키보드 이벤트가 넘어옵니다. (type: keypress)
   console.log(event.keyCode); //keyCode를 바로 출력할 수 있습니다.
}