디렉티브의 scope

reference

https://github.com/angular/angular.js/wiki/Understanding-Scopes

https://docs.angularjs.org/api/ng/directive/ngIf

http://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if

ng-if와 같은 디렉티브는 own scope를 새로 만든다.

아래 코드에서 memoInpuType과 memo의 scope은 같지 않아서

$scope.memo로 접근 불가능.

  <div ng-if="memoInputType === 'textarea'">
    <textarea ng-model="memo"></textarea>
  </div>
  <div ng-if="memoInputType === 'input'">
    <input type="text" ng-model="memo">
  </div>
  <button type="button" ng-click="ok()">{{okBtnText}}</button>

아래와 같이 $parent로 접근하여 controller에서 제어할 수 있다.

  <div ng-if="memoInputType === 'textarea'">
    <textarea ng-model="$parent.memo"></textarea>
  </div>
  <div ng-if="memoInputType === 'input'">
    <input type="text" ng-model="$parent.memo">
  </div>
  <button type="button" ng-click="ok()">{{okBtnText}}</button>

• The scope created within ng-if inherits property from parent scope. So 'memo' gets value from parent, if child scope doesn't have memo variable. I input sth to input-text, child scope set memo to its own property.
• ng-repeat, ng-switch, ng-view and ng-include all create new child scopes