요즘은 Angular 2/4, ReactJS가 더 많이 쓰이지만, 아직도 legacy project에서는 Angular 1.x 도 쓰이므로 이렇게 포스팅합니다.
Model 이 바뀌었지만 이 변화가 UI가 바뀌지 않을 때 문제가 여러가지 있을 수 있지만 흔히 하는 실수, 흔히 겪는 문제를 다뤄봤습니다.
AngularJS를 사용할 때 angular-* 모듈들을 사용하고 Angular 방식으로 개발하는게 좋습니다.
하지만 성능 개선이나 다른 이유 때문에 Angular 방식을 벗어나서 jQuery plugin을 사용해야 한다든가
다른 방식으로 개발을 해야할 때가 생깁니다.
문제는 Model을 변경했으나 UI가 변경안될 때 생깁니다.
“왜 내 ng-model 이 망가졌어!”
ng-repeat, ng-model, $resource, $http는 AngularJS의 내장 함수들이며, 각 함수들의 본연의 일과 모델을 변경하는 등의 일을 마치고 $scope.$apply()를 호출하도록 되어있습니다.
위 보이는 그림과 같이 “set up $watches”, $watch를 사용해서 model의 변화를 감지합니다.
비 AngularJS 모듈들을 사용하실 때에는 위와 같은 model 변화에 따른 감지나 그에 따른 UI 변경등을 신경 써주지 않습니다.
따라서 직접 수동으로 $watch 이벤트를 바인딩해서 model의 변화를 감지하고, $scope.$apply()를 호출해서 UI가 바뀐 모델로 변경되도록 해야합니다.
컨트롤러 안에 있는 특정 변수 또는 object yourScopeVariableToWatch의 변화에 따라서 UI를 변경해주고 싶다고 하면,
아래와 같이 코드를 컨트롤러 안에 작성해주시면 저 값이 변할 때마다 바로바로 UI에도 변화가 생깁니다.
// In a controller
$scope.$watch('yourScopeVariableToWatch', function() {
$scope.$apply();
});