การสร้างคอนโทรลเลอร์
คอนโทรลเลอร์ AngularJS ใช้ทุกที่และการสาธิตรหัสค่อนข้างง่ายในการสร้าง
<! doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "ExampleApp"> <head> <meta http-equiv = "content-type" content-type src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet" /> <link href = "bootstrap.css" rel = "stylesheet" /> {$ scope.setInput = function (value) {console.log ("พิมพ์:" + value);}}); </script> </head> <body ng-controller = "defaultCtrl"> <div> <h> นับ < ng-click = "setInput (value)"> คลิก </button> </div> </body> </html>การควบคุมนั้นง่ายมาก ก่อนอื่นฉันเพิ่มแอตทริบิวต์ NG-APP ลงใน HTML เพื่อระบุขอบเขตของโมดูล
เพิ่ม NG-controller ลงในร่างกายเพื่อแสดงขอบเขตของตัวควบคุม DEFAULTCTRL
คำสั่ง ng-model ในหมายเหตุอินพุตคือการเชื่อมโยงข้อมูลการเชื่อมโยงข้อมูลสองทาง (MVVM)
$ SCOPE เป็นขอบเขตในตัวของ AngularJs
ตัวอย่างนี้เป็นเพียงการพิมพ์ค่าอินพุตไปยังคอนโซลดังที่แสดงในรูป:
นั่นคือทั้งหมดมันง่าย
ปัญหาขอบเขตคอนโทรลเลอร์หลายฉบับ
ตอนนี้เรามาปรับเปลี่ยนโปรแกรมกันดีกว่า
<body> <div ng-controller = "defaultctrl"> <h> นับ </h> <div> <อินพุตที่ต้องการ ng-model = "value"/> <button ng-click = "setInput (value)"> คลิก </button> </div> </div> ng-click = "setInput (value)"> คลิก </button> </div> </body>
ส่วนที่เหลือของรหัสยังคงไม่เปลี่ยนแปลงฉันแค่ใส่อสังหาริมทรัพย์ NG-controller ใส่ลงในร่างกายลงในสอง divs ฉันนำคอนโทรลเลอร์ defaultCtrl กลับมาใช้ใหม่ ฉันเดาว่าถ้าฉันป้อนเนื้อหาในแท็กอินพุตแรกและคลิกปุ่มปุ่มของคอนโทรลเลอร์ที่สองผลลัพธ์ที่คุณคาดหวังจะปรากฏขึ้นหรือไม่
ผลลัพธ์เหมือนกับสิ่งที่คุณคิดกับคุณหรือไม่? คุณจะเห็นว่าผลลัพธ์ไม่ได้กำหนด ในคำอธิบายที่ดีควรเป็นไปได้ว่าขอบเขตของพวกเขาจะแตกต่างกัน แม้ว่าคุณจะนำคอนโทรลเลอร์แบบรวมกลับมาใช้ใหม่ขอบเขตนั้นแตกต่างกันอย่างแน่นอนเมื่อสร้างมันขึ้นมา
ฟังก์ชั่นที่เรียกว่าโรงงานจะส่งคืนขอบเขตที่แตกต่างกัน
ดังนั้นวิธีการเข้าถึงระหว่างขอบเขตที่แตกต่างกัน? ใน AngularJS มี $ rootscope สำหรับการเข้าถึงขอบเขต
นี่คือสามฟังก์ชั่นที่จะแนะนำ
$ on (ชื่อ, handler) ลงทะเบียนฟังก์ชั่นตัวจัดการเหตุการณ์ที่จะถูกเรียกเมื่อมีเหตุการณ์เฉพาะโดยขอบเขตปัจจุบัน
$ emit (ชื่อ, args) ส่งเหตุการณ์ไปยังขอบเขตหลักปัจจุบันจนถึงขอบเขตรูท
$ Broadcast (Name, ARGS) ส่งเหตุการณ์ไปยัง Subscope ภายใต้ขอบเขตปัจจุบันพารามิเตอร์คือชื่อเหตุการณ์และวัตถุที่ใช้เพื่อให้ข้อมูลเพิ่มเติมกับเหตุการณ์
ตอนนี้เปลี่ยนรหัสต่อไปนี้:
<script> angular.module ("ExampleApp", []). คอนโทรลเลอร์ ("defaultCtrl", ฟังก์ชั่น ($ scope, $ rootscope) {$ scope. $ on ("updateValue", ฟังก์ชั่น (เหตุการณ์, args) {$ scope.input = args.zip;}; {zip: value}); console.log ("พิมพ์:" + $ scope.input);} $ scope.copy = function () {console.log ("คัดลอก:" + $ scope.input);};}) ng-click = "copy ()"> คัดลอก </button> </div> </div>ในรหัสเซ็กเมนต์ฉันเพิ่มฟังก์ชั่นหลายอย่างและเปลี่ยนฟังก์ชั่นของคอนโทรลเลอร์ที่สองในเวลาเดียวกัน
ผลลัพธ์:
มันเกิดขึ้น
มรดกผู้ควบคุม
<script> angular.module ("ExampleApp", []). คอนโทรลเลอร์ ("defaultCtrl", ฟังก์ชั่น ($ scope, $ rootscope) {//$scope.$on("upDateValue ", ฟังก์ชั่น (เหตุการณ์, args) {// $ scope.input = args.zip; //}); {//$rootscope.$broadcast("updateValue ", {zip: value}); $ scope.input = value; console.log (" พิมพ์: " + $ scope.input);} $ scope.copy = function () {console.log ($ scope) {$ spope.copy = function () {console.log ("คัดลอก:" + $ scope.input);};}); </script> <body ng-controller = "defaultctrl"> <div> ng-click = "setInput (value)"> คลิก </button> </div> <div> <div ng-controller = "simplectrl"> <h> นับ </h> <div> <อินพุตต้องการ ng-model = "value"/> <button ng-click = "copy ()ฉันเพิ่มคอนโทรลเลอร์และหลังจากการสังเกตอย่างระมัดระวังของ Simplectrl ฉันพบว่า defaultCtrl มี simplectrl ดังนั้นฟังก์ชั่นง่าย ๆ สืบทอด
ผลลัพธ์: เมื่อฉันโพสต์อินพุตในหน้าต่างแรกหน้าต่างที่สองก็เปลี่ยนไปและควรเป็นค่าเดียวกัน
$ ขอบเขตปัญหาขอบเขตคุณต้องเข้าใจขอบเขตเมื่อใช้คอนโทรลเลอร์