[AngularJS] $scope 상속에 대해 유의할 점

일단 controller는 상속이 되고 controller에 사용되는 $scope 역시 상속이 된다는 점을 알고 있었다.

하지만 그 구체적인 동작 방식을 모르다보니 상당한 삽질을 하게 되었다.

일단 오늘 정리할 것은 ng-model을 이용하여 양방향 바인딩을 할 때 $scope 상속이 어떻게 동작하는지이다.

컨트롤러 구성

app.controller("controller1", function ($scope) {

  $scope.parentdata = "parent scope";

});

app.controller("controller2", function ($scope) {

  $scope.childdata = "child scope";

});

html 코드

<div ng-controller="controller1">

  {{parentdata}} ------------------------------------> 1 : parent scope 출력

  <div ng-controller="controller2">

    {{parentdata}} ----------------------------------> 2 : parent scope 출력

    {{childdata}} -----------------------------------> 3 : child scope 출력

    <input type="text" ng-model="parentdata"> --------> 4 : 아무것도 출력되지 않음 ???

  </div>

</div>

위의 예에서 밖의 div태그에는 controller1이 사용되고 있고 내부 div에는 controller2가 사용되고 있는데 이럴 경우

controller2는 controller1을 상속하게 되고 당연히 사용하는 $scope도 상속을 하게 된다.

그래서 controller2에는 parentdata라는 변수가 선언되어있지 않지만 2번에서도 "parent scope"라는 값이 출력된다.

1,2,3 모두 예측한 결과가 출력되는 것이다.

문제는 4번...입력 폼에 초기값으로 "parent data"가 출력될 것으로 기대했으나 그렇지 않았고 역으로 새로 값을

입력하는 경우에도 controller1의 parentdata에는 입력된 값이 들어가지 않았다.

이렇게 ng-model을 통해 양방향 바인딩을 할 경우 자식 컨트롤러에서 부모 컨트롤러와 같은 이름의 변수를 

사용하는 경우 부모의 변수를 사용하는 것이 아니라 자식 $scope에 동일한 이름으로 변수를 생성하고 이것을

사용하게 되는 것이다. 

이 경우 만일 부모의 변수를 사용하고 싶다면 4의 코드를 다음과 같이 바꾸어야 한다.

<input type="text" ng-model="$parent.parentdata"> --------> 4 : parent scope 출력

오늘은 이 것 때문에 한 2시간 헤맸다...ㅠ.ㅠ