$watch 메서드는 앵귤라만의 독특한 특징 중 하나다.
생소한 개념을 계속적으로 접해서 또 새로운 것을 맞이하기에 약간 두려울수도 있겠지만, $watch는 두려워할 필요가 없을 정도로 단순하고, 또 유용하다.
$watch 메서드는 scope 객체 상에 존재하는 메서드로, 그 이름처럼 특정 변수를 주시하면서 값의 변화가 있는지를 체크하고 변화가 있으면 미리 등록해놓은 콜백 메서드를 호출하게 된다.
간단한 사용 예를 살펴보자.
$scope.$watch('name', function(newValue, oldValue)
{
window.alert('$scope.name의 값이 ' + $scope['name'] + '로 바뀌었습니다!');
}, true);매우 간단하다!
하나씩 살펴보면, 첫번째 파라메터인 'name'은 매의 눈으로 지켜볼 스코프 상의 모델(변수) 이름이다.
$scope.test 라는 모델을 값 변화를 살펴보고 싶다면, 첫번째 파라메터에 'test' 라고 써주면 된다.
두번째 파라메터는 값이 변했을 때 수행하게 될 콜백 메서드이다. 콜백 메서드의 파라메터명을 보면 대략 어떤 값들이 자동으로 주입될지 짐작할 수 있다! 어쨌든 값이 변화될 때마다 수행하고 싶은 로직을 이 콜백 메서드에서 선언해두면 값이 변화할 때마다 이 콜백 메서드가 자동으로 실행될 것이다.
마지막 파라메터는 true 혹은 false로 들어가게 된다. 보통은 값의 변화를 레퍼런스의 변화로 인지하게 된다. 기본값인 false에서는 관찰하고 있는 변수의 레퍼런스가 변화했는지 체크하게 되고, true로 세팅할 경우 레퍼런스가 아닌 실제 변수 내의 값(!)이 변화했는지를 체크하게 된다. 당연히 true일 때 훨씬 정교하게 변화를 감지하게 된다고 볼 수 있다.
관찰하고 있는 모델의 값이 변했는지 아닌지는 angular.equals 함수에 의해 판별된다. 값의 비교를 위해서 이전 값을 저장할 때는 angular.copy 함수가 사용된다. 따라서 복잡한 모델의 경우 메모리 사용면에서나 퍼포먼스 면에서 나쁜 영향을 줄 수 있다.