머리말
AngularJS의 자체 지침에는 현재 ng-include , ng-view , ng-switch 및 ng-repeat 포함됩니다. 그 이유는 이러한 지침이 AngularJS에 의해 내부적으로 정의되지만 directive 에 의해 구현 된 것과 동일하기 때문입니다. 그들은 내부적으로 scope:true 사용합니다. 아동 범위는 부모의 역할을 상속 받고 독립적 인 아동 범위를 구축합니다. 모든 양방향 바인딩을 구현할 수 없으며 아동 스코프 만 구현할 수 있습니다.
AngularJS 상속은 JavaScript의 프로토 타입 상속을 통해 구현됩니다. 프로토 타입 상속은 부모의 범위가 아동 범위의 프로토 타입 체인에 있음을 의미합니다. 프로토 타입 체인의 검색은 속성이 검색 될 때만 트리거되므로 속성 값이 변경 될 때 트리거되지 않습니다. 따라서 원래 유형을 객체로 변환하고 값을 객체의 속성에 바인딩해야합니다.
예에서 볼 수 있듯이, 수정 후, 자식은 부모 범위의 특성을 수정할 수 있습니다. 원시 유형은 부모 클래스의 범위 만 물려받을 수 있습니다.
현재 세 가지 구현 방법이 있으며 다음에 소개하겠습니다.
{}를 상위 스코프에 추가하여 원래 유형을 객체로 변환하십시오.
코드는 다음과 같습니다.
<! docType html> <html lang = "en"ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"type = "text/javascript"> <style> .inputone {width : 100px; 높이 : 50px; 배경 : SkyBlue; }. inner {border : 1px solid skyblue; 너비 : 200px; 높이 : 150px; } .outer {테두리 : 1px 솔리드 몬; 너비 : 200px; 높이 : 150px; } .sco {배경 : SkyBlue; . src = " 'one.html'"> </div> <div ng-include src = " 'two.html'"> </div> </div> </body> <cript> var app = angular.module ( "childscope", [ '템플릿']) .controller ( "childcon", [ "$ scope") vm = vm = {}; var template = angular.module ( "template", []) .run ([ "$ templatecache", function ($ templatecache) {$ templatecache.put ( "one.html", " +"<div> <input type = 'text'ng-model = 'vm.private1'// " ($ templatecache) {$ templatecache.put ( "2.html", " +"<div> <입력 유형 = 'text'ng-model = 'vm.private2'/> " +"<div class = 'sco'> <sco '> <sco'> <sco '> <sco'> </div> "</div>")))))))))컨트롤러를 통한 구문으로 구현
controller as 실제로 controller 의 샘플 객체와 동일합니다. 원칙은 원래 유형을 객체 유형으로 변환하는 것입니다.
<! docType html> <html lang = "en"ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"type = "text/javascript"> <style> .inputone {width : 100px; 높이 : 50px; 배경 : SkyBlue; }. inner {border : 1px solid skyblue; 너비 : 200px; 높이 : 150px; } .outer {테두리 : 1px 솔리드 몬; 너비 : 200px; 높이 : 150px; } .sco {배경 : SkyBlue; . src = " 'one.html'"> </div> <div ng-include src = " 'two.html'"> </div> </div> </body> <cript> var app = angular.module ( "childscope"), [ '템플릿']) .controller ( "thiscope", [$ scope1), ($ scope) {$. this.private2 = 22; var template = angular.module ( "template", []) .run ([ "$ templatecache", function ($ templatecache) {$ templatecache.put ( "one.html", " +"<div> <input type = 'text'ng-model = 'vm.private1'/>> ") ($ templatecache) {$ templatecache.put ( "2.html", " +"<div> <입력 유형 = 'text'ng-model = 'vm.private2'/> " +"<div class = 'sco'> <sco '> <sco'> <sco '> <sco'> </div> "</div>")))))))))$ parent.name을 사용하여 내부 메소드를 호출하여 구현하십시오.
프로토 타이핑 상속은 부모의 범위가 자바 스크립트의 기능인 아동 스코프의 프로토 타입 체인에 있음을 의미합니다.
AngularJS의 범위에는 내부적으로 정의 된 관계도 있습니다.
스코프. $ 부모의 스코프 범위를 가리 킵니다.
스코프. $$ Childhead는 첫 번째 스코프 하위 경향을 가리 킵니다.
범위. $$ child tail은 마지막 스코프의 하위 경향을 가리 킵니다.
범위. $$ Nextibling은 다음 인접한 범위의 범위를 가리 킵니다.
범위. $$ 이전의 이전 범위 범위를 가리 킵니다.
아동 스코프에서 scope.$parent.name 사용하여 부모 범위에 양방향 바인딩을 받으십시오.
예는 다음과 같습니다.
<! docType html> <html lang = "en"ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"type = "text/javascript"> <style> .inputone {width : 100px; 높이 : 50px; 배경 : SkyBlue; }. inner {border : 1px solid skyblue; 너비 : 200px; 높이 : 150px; } .outer {테두리 : 1px 솔리드 몬; 너비 : 200px; 높이 : 150px; } .sco {배경 : SkyBlue; } </style> </head> <body ng-controller = "childcon"> <div> <h3> 상위 스코프 </h3> <span> {{private1}} </span> <span> {{private2}} </span> </div> <div> <h3> 자체 스코프 src = " 'one.html'"> </div> <div ng-include src = " 'two.html'"> </div> </div> </body> <cript> var app = angular.module ( "childscope"), [ '템플릿']) .controller ( "ChildCon", [ "$ scope") $ scope.private2 = 22; var template = angular.module ( "template", []) .run ([ "$ templatecache", function ($ templatecache) {$ templatecache.put ( "one.html", " +"<div> <input type = 'text'ng-model = '$ parent.private1'// " ($ templatecache) {$ templatecache.put ( "2.html", " +"<div> <입력 유형 = 'text'ng-model = '$ parent.private2'/> " +"<div class = 'sco'> <sco '> <sco'> <sco '> </div> "</div>"</div> ")). }]) </script> </html>요약
위는 AngularJS 아동 범위 문제의 전체 내용입니다. 모든 사람의 연구와 일에 도움이되기를 바랍니다. 궁금한 점이 있으면 언제든지 물어보십시오.