[AngularJS] ngRepeat scope 생성

AngularJS의 ngRepeat 속성은 반복 수행을 할 때 유용하게 활용된다.

그러나 다음과 같은 경우 예상과는 다르게 반응하는 결과물을 볼 수 있다.

위의 예제를 보면 라디오 버튼을 클릭해도 $scope.selected 값은 변경되지 않는 것을 확인 할 수 있다.
이러한 현상이 발생하는 이유는 ngRepeat이 새로운 scope를 생성하기 때문이다. AngularJS에서 자식 scope의 값이 변경되더라도 부모 scope의 동명 변수가 변경되지 않는다. 때문에 우리가 기대했던 mainCtrl의 selected값이 변경되지 않는 것이다.

그렇다면 우리가 원하는 대로 동작하게 하기 위해서는 어떻게 해야할까?
간단하다. $parent를 이용하는 것이다. $parent는 부모 scope영역에 접근 할 수 있게 해준다.

다음 코드는 우리의 예상대로 작동한다.

둘의 차이점은 $parent의 유무 뿐이다.
이번 경험을 통해 새삼 명세를 잘 읽어야 한다는 생각을 다시 한 번 하게 되었다.


참고 링크: https://docs.angularjs.org/api/ng/directive/ngRepeat