Inspired World

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

JavaScript

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

InspiredJW 2014.04.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에도 변화가 생깁니다.


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


저작자 표시 비영리 변경 금지
신고
0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 Next