앵귤러를 통해 개발하다보면, 종종 데이터 모델을 변경했음에도 뷰에 제대로 출력되지 않는 경우가 있다.
크게 두가지 경우로 나눌 수 있는데,
1. 보통 callback 함수를 통해 처리한 뒤에 반영이 늦는경우 다른 조작을 몇번 하면 반영이 될때가 많다.
2. 주로 그리드(grid)와 연동할 때 발생하는데, 그리드에 관련된 다이렉티브를 $compile 을 사용해서 컴파일하여 동적으로 페이지에 추가할 때 주로 이런 문제점이 나타났다. 이때는 조작을 해도 안되고 데이터를 확인해보면 정상인데, 화면에 업데이트가 안되다가 한~참 뒤에 보이거나, 윈도우 크기를 살짝 리사이즈해주면 정상적으로 다시 보인다.
첫번째 경우는 callback 함수 사용시에 앵귤러 내부에서 apply를 못해주는 경우가 종종 있는것 같다.
이때는 콜백함수 호출 후, $scope.$apply() 를 실행해주면 대체적으로 바로 반영된다.
두번째 경우는 아마도 컴파일을 통해 동적으로 추가하는 과정에서 이미 내부 다이렉티브가 해석되었는데, 화면에 그리지 못한채로 페이지에 추가되어서 생긴 문제가 아닐까 싶다. 그나마 유일한 해결책을 발견했는데, 창피할 정도로 간단하다.
위에서 윈도우 크기를 살짝 리사이즈해주면 정상적으로 보인다고 했는데, jQuery의 resize() 메서드를 한번 호출해주면 뷰가 업데이트된다.
예를 들어 보이지 않는 Grid가 들어있는 오브젝트가 $('grid') 라면, $('grid').resize(); 를 한번 호출해주면 보인다. 리사이즈하면 해당 위치에 화면을 다시 렌더링해야해서 나타나는게 아닐까 싶다.
