AngularJS에서 하나의 컨트롤러가 선언되었다고 생각해보자.. 만약 똑같은 컨트롤러에 추가할 내용이 있어서 그 아래에 다시
동일한 컨트롤러를 선언하고 내용을 추가하면 어떻게 될까? 또 과연 새롭게 추가된 내용이 먼저 선언한 내용과 함께 추가될까? 만약 그렇지 않다면 그 방법은 어떻게 될지 알아보고자 한다.
먼저 분할하여 선언한다는 것은 아래와 같이 사용한다는 것을 의미한다. 만약 appCtrl이라는 컨트롤러가 존재하고 여기에 각각의 변수를 선언하고자 한다면 아래와 같다. 먼저 html 코드이다.
아래는 appCtrl이라는 동일한 controller에 각각의 변수 $scope.a 그리고 $scope.b를 선언한 모습이다.
위와 같이 실행하면 어떻게 될까? 그 결과부터 얘기하면 우리가 기대했던 것과는 달리 $scope.a는 없어지고 $scope.b만 남게된다. 즉, 동일한 컨트롤러를 선언할 경우 추가되는 것이 아니라 대체되는 것이다.
어찌보면 당연한 결과이다. 혹시라도 다른 방법이 없을까 생각해보았지만 딱히 방법이 없다. 그리고 있다하더라도 나중에 이를 잊는다면 문제의 소지가 발생할 수 있다. 그럼 어떻게 하면 좋을까? 간단한 방법으로 다른 컨트롤러명을 사용하는 것이다.
컨트롤러를 appCtrl, 그리고 nextCtrl 처럼 변경할 경우 html에 두개의 컨트롤러를 선언해야하는 번거로움이 있을 수 있지만 사실 해당하는 컨트롤러에 해당하는 변수를 선언하는 것이 당연한 이치이다. AngularJS는 범위 지향적 언어이므로 다른 방법을 찾는 것보다 이를 활용하는 것이 더 타당할 수 있을 것이다.
# 그 외의 방법또 다른 방법을 찾는다면 $scope에 존재하는
$emit(),
$broadcast() 메소드를 사용할 수 있다. 이는
scope 즉 범위를 전달하는 AngularJS의 내부 서비스들이다. 이를 사용하여 서로 다른 스콥이더라도 원하는 변수를 전달 받는 방법이 가능하다.
$scope.$emit() 그리고 $broadcast()는 다음에 알아보도록 하겠다.