<!doctype html> <html ng-app="firstApp"> <head> <meta charset="utf-8"> <script src="angular-1.3.0.js"></script> </head> <body> <div ng-controller="parentCtrl"> <input ng-model="args"> <div ng-controller="childCtrl"> <input ng-model="args"> </div> </div> <script> var app=angular.module('firstApp',[]); app.controller('parentCtrl',function($scope) { $scope.args = '123'; }).controller('childCtrl', function($scope) { }); </script>
사례 설명:
childCtrl에는 특정 args 속성이 정의되어 있지 않지만 childCtrl의 범위는 parentCtrl의 범위를 상속하므로
따라서 childCtrl은 프로토타입을 통해 상위 범위 args 속성에 연결되어 입력으로 설정됩니다. 그리고 상위 입력의 입력 값은 하위 입력에 자동으로 동기화됩니다
그러나 그 반대는 사실이 아닙니다. 즉, 자식의 수정은 부모의 값을 변경할 수 없으며, 부모가 수정된 후에도 자식도 동기화되지 않습니다. 이유는 자식 범위에 콘텐츠를 입력할 때
입니다.
HTML 코드의 모델은 childCtrl의 범위에 명시적으로 바인딩되어 있으므로 AngularJS는 childCtrl에 대한 args 기본 유형 속성을 생성합니다.
AngularJS 범위 상속 프로토타입 메커니즘에 따르면 childCtrl은 자체 범위에서 args 속성 값을 찾으므로 상위 항목에서 args 값을 찾지 않습니다.
결과적으로 자식 범위에는 args가 있고 부모 범위에는 args가 있으며 자식과 부모 사이의 값은 더 이상 동기화되지 않습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.