AngularJS의 Model이 바뀌었는데 UI가 바뀌지 않을 때

망가진(?) 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에도 변화가 생깁니다.

// In a controller
$scope.$watch('yourScopeVariableToWatch', function() {
  $scope.$apply();
});