AngularJS $watch

$watch 메서드는 모델에 변경이 있는지 감시하고 변화가 있으면 콜백을 실행하는 메서드입니다.
아래는 간단한 예제입니다.

 

$scope.name = '';
$scope.$watch('name', function(newValue, oldValue) {
    console.log('값이 ' + $scope.name + '로 바뀌었습니다!');
}, true);

 

'name'은 스코프에 있는 모델 변수의 이름입니다.
name 이란 변수를 감시하고 싶다면 저 첫번째 파라미터에 변수명을 입력하면 됩니다.
$watch가 무조건 실행되는 것을 막기위해 newValue와 oldValue를 받아 비교하여 조건을 만들어 줍니다.

 

$scope.$watch('name', function(newValue, oldValue) {
    if( newValue === oldValue ) return; // 값 비교
    console.log('값이 ' + $scope.name + '로 바뀌었습니다!');
}, true);

 

필터를 사용하여 체크박스의 체크 여부도 $watch로 감시할 수 있습니다.

 

$scope.$watch('checkState|filter:{selected:true}', function(newValue, oldValue) {
    console.log(newValue);
}, true);