angularjs 의 controller는 $scope 변수를 통해서 내부에 사용하는 데이터를 관리한다. $scope는 각 controller간 공유되지 않으며 해당 controller의 scope 안에서만 사용된다. 표시할 데이터가 화면 여기저기 흩어져 있을때 곤란한 일이 생긴다. 하나의 controller로 처리하자니 controller의 커버범위가 너무 커지고 여러 controller로 쪼개자니 controller사이에 데이터를 주고 받아야 한다.
어떤 방법이 좋을까 생각하다가 일단 하나의 controller로 처리해보기로 했다. 예상대로 controller의 커버범위가 너무 커져서 그 범위 안에 들어가는 기능이 controller에 추가되기 시작했다. controller가 엄청 커졌고 내부 변수가 엄청나게 많아지기 시작했다. 도저히 감당이 안된다. 그래서 쪼개는 방법을 사용해보기로 했다.
댓글을 만들고 있었는데 headController, listController, editController로 각 기능을 쪼개고 editController에서 입력이 데이터 추가가완료되면 listController에 데이터가 추가되었다고 알려주었다. 데이터에 변동이 생기면 listController는 headController에 데이터가 변동되었으니 header에 들어갈 데이터를 업데이트하라고 알려주었다. 원하던대로 아주 깔끔해졌다.
app.controller('EditController', [function() {
... (in post callback)
$rootScope.$broadcast('addComment', data);
}]);
app.controller('ListController', [function() {
$scope.$on('addComment', function(e, data) {
... (change list)
});
}]);
문제가 하나 있긴하다. controller를 서로 연결하는 것이 $rootScope라는 것이다. 문서를 제대로 보지는 못했지만 $rootScope는 모듈 전체에서 공유되는데 $rootScope에 이런 일을 시킨다는 것이 아무래도 찜찜하다. 아직 angularjs 초보라 이런 초보적인 방법으로 하지만 좀 더 공부해보고 더 나은 방법으로 고쳐봐야겠다.
