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