คำนำ
คำแนะนำของ 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" ความสูง: 50px; ความเป็นมา: SkyBlue; } .inner {ชายแดน: 1px Solid SkyBlue; ความกว้าง: 200px; ความสูง: 150px; } .OUTER {เส้นขอบ: 1PX ของแข็ง SaltMon; ความกว้าง: 200px; ความสูง: 150px; } .sco {พื้นหลัง: SkyBlue; } </style> </head> <body ng-controller = "childCon"> <div> <h3> ขอบเขตหลัก </h3> <pan> {{vm.private1}} </span> <span> {{vm.private2}} src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> app = angular.module ("childscope", ['template') VM = $ scope.vm = {}; template var = angular.module ("เทมเพลต", []) .run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("one.html", " +" <div> ($ templatecache) {$ templatecache.put ("two.html", " +" <div> <อินพุต type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <pan> ประเภทดั้งเดิม </span> {{test}การใช้งานผ่านคอนโทรลเลอร์เป็นไวยากรณ์
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" ความสูง: 50px; ความเป็นมา: SkyBlue; } .inner {ชายแดน: 1px Solid SkyBlue; ความกว้าง: 200px; ความสูง: 150px; } .OUTER {เส้นขอบ: 1PX ของแข็ง SaltMon; ความกว้าง: 200px; ความสูง: 150px; } .sco {พื้นหลัง: SkyBlue; } </style> </head> <body ng-controller = "childCon as vm"> <div> <h3> ขอบเขตหลัก </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}} </span> src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("childscope", ['template') this.private2 = 22; เทมเพลต var = angular.module ("เทมเพลต", []) .run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("one.html", " +" <div> ($ templatecache) {$ templatecache.put ("two.html", " +" <div> <อินพุต type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <pan> ประเภทดั้งเดิม </span> {{test}ใช้ $ parent.name เพื่อเรียกใช้วิธีการภายในเพื่อใช้งาน
การสืบทอดการสร้างต้นแบบหมายความว่าขอบเขตหลักอยู่ในห่วงโซ่ต้นแบบของขอบเขตเด็กซึ่งเป็นคุณสมบัติของ JavaScript
ขอบเขตของ AngularJS ยังมีความสัมพันธ์ที่กำหนดภายใน:
ขอบเขต. $ ผู้ปกครองชี้ไปที่ขอบเขตหลักของขอบเขต;
ขอบเขต $$ HEVEDHEAD ชี้ไปที่ขอบเขตย่อยแรกของขอบเขต;
ขอบเขต. $$ ChildTail ชี้ไปที่ขอบเขตย่อยสุดท้ายของขอบเขต;
ขอบเขต. $$ Nextsibling ชี้ไปที่ขอบเขตที่อยู่ติดกันถัดไปของขอบเขต;
ขอบเขต. $$ prevsibling ชี้ไปที่ขอบเขตที่อยู่ติดกันก่อนหน้าของขอบเขต;
รับการเชื่อมโยงสองทางกับขอบเขตหลักโดยใช้ 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" ความสูง: 50px; ความเป็นมา: SkyBlue; } .inner {ชายแดน: 1px Solid SkyBlue; ความกว้าง: 200px; ความสูง: 150px; } .OUTER {เส้นขอบ: 1PX ของแข็งเกลือ; ความกว้าง: 200px; ความสูง: 150px; } .sco {พื้นหลัง: SkyBlue; } </style> </head> <body ng-controller = "childCon"> <div> <h3> สเปคผู้ปกครอง </h3> <pan> {{private1}} </span> <span> {{private2}} </span> src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> app = angular.module ("childscope", ['template') $ scope.private2 = 22; เทมเพลต var = angular.module ("เทมเพลต", []) .run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("one.html", " +" <div> ($ templatecache) {$ templatecache.put ("two.html", " +" <div> <อินพุต type = 'text' ng-model = '$ parent.private2'/> " +" <div class = 'sco'> <span> ประเภทดั้งเดิม </span> {}สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของปัญหาขอบเขตเด็ก AngularJS ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาและการทำงานของทุกคน หากคุณมีคำถามใด ๆ โปรดถาม