웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

angularjs에서 scope watch 예제보기

Last Modified : 2018-03-23 / Created : 2017-03-30
5,373
View Count
AngularJS에서 사용할 수 있는 이벤트 방법 중 하나로 $scope의 $watch()를 사용할 수 있습니다. 아래는 $scope의 $watch()를 언제 어떻게 사용하는 예제와 함께 알아봅니다.




# $scope의 $watch()는 무엇을 하는가?

AngularJS에서 $scope.$watch는 어떤 기능을 수행할까요? 예를들어 스코프에 존재하는 변수 money가 존재한다고 가정합니다.(아래부터는 모델이라 부르겠습니다.) 이 money라는 값은 금액을 나타내는데 세 자리수마다 콤마를 사용하여 표기하고 싶습니다. 그래서 모델값이 정해지면 콤마를 추가하는 함수를 적용하였습니다.

그런데 기존 모델값이 0이라 콤마가 없었는데 값자기 1000으로 변경되어 콤마가 필요하게되었습니다. 모델의 값이 바뀌었으므로 콤마를 추가하는 함수를 적용해야하는데 모델이 바뀌는 것을 어떻게 알 수 있을까요? 이때 $scope.$watch()를 사용하여 해결할 수 있습니다. $watch() 함수는 값이 바뀌는 경우 설정된 콜백함수를 실행시켜주는 이벤트 함수이기 때문입니다. 특징으로 기존값과 새로 바뀐 값을 모두 알 수 있습니다.



# AngularJS에서 $scope $watch() 예제소스

아래에는 간단한 $watch 예제를 수행해보도록 하겠습니다. 우선 해당 컨트롤러에 $scope에 대하여 의존성이 선언되어 있어야 $scope 서비스를 사용할 수 있습니다. 그 후 $watch를 위한 코드를 추가합니다.

$watch()에 넘기는 값은 $scope의 모델값이 됩니다.

$scope.sitename = 'webisfree';

$scope.$watch('sitename ', function (newValue, oldValue, scope) {
  // Code ...
});

위 예제는 해당 스코프 내부의 모델값 test의 변경 여부를 감시(watch)하다가 업데이트 된 경우 뒤에 따르는 콜백함수를 실행합니다.


Previous

angularjs에서 $destroy 이벤트는 언제 사용하고 어떻게 동작하나요?

Previous

AngularJS에서 Drag and Drop 드래그하여 요소를 이동하는 방법은?