ขอบเขตใน AngularJS มีโครงสร้างแบบลำดับชั้นและมีการซ้อนกันมาก พวกเขาทั้งหมดมี $ rootscope หลัก (นั่นคือแอปพลิเคชันเชิงมุมที่สอดคล้องกันหรือ NG-APP) และจากนั้นชิ้นส่วนขอบเขตอื่น ๆ ทั้งหมดจะสืบทอดมาจาก $ rootscope นี้หรือพวกเขาซ้อนอยู่ภายใต้ขอบเขตหลัก หลายครั้งคุณจะพบว่าขอบเขตเหล่านี้ไม่ได้แบ่งปันตัวแปรหรือสืบทอดอะไรจากต้นแบบอื่น
ดังนั้นในกรณีนี้คุณสื่อสารระหว่างขอบเขตได้อย่างไร? ตัวเลือกหนึ่งคือการสร้างบริการ Singleton ในขอบเขตแอปพลิเคชันจากนั้นจัดการการสื่อสารสำหรับ subscopes ทั้งหมดผ่านบริการนี้
มีตัวเลือกอื่นใน AngularJs: จัดการการสื่อสารผ่านเหตุการณ์ในขอบเขต แต่วิธีการนี้มีข้อ จำกัด บางประการ ตัวอย่างเช่นคุณไม่สามารถกระจายเหตุการณ์ไปยังขอบเขตของการตรวจสอบทั้งหมดได้อย่างกว้างขวาง คุณต้องเลือกว่าจะสื่อสารกับขอบเขตหลักหรือขอบเขตเด็ก
$ on, $ emit และ $ broadcast ทำให้การถ่ายโอนเหตุการณ์และข้อมูลระหว่างคอนโทรลเลอร์ง่าย
ตัวอย่างมีดังนี้
รหัส HTML
<div ng-controller = "parentctrl"> <!-parent-> <div ng-controller = "selfctrl"> <!-ตัวเอง-> <a ng-click = "คลิก ()"> คลิกฉัน </a> <div ng-controller = "ChildCtrl" <!-ผู้ปกครอง-> </div>
รหัส JS
app.controller ('selfctrl', ฟังก์ชั่น ($ scope) {$ scope.click = function () {$ scope. $ broadcast ('to-cild', 'child'); $ scope. $ emit ('to-parent', '$ parent); ฟังก์ชั่น (เหตุการณ์, ข้อมูล) {console.log ('parentctrl', ข้อมูล); $ scope. $ on ('to-gild', ฟังก์ชั่น (เหตุการณ์, ข้อมูล) {console.log ('childctrl', ข้อมูล); // เด็กสามารถรับค่า}); ฟังก์ชั่น ($ scope) {$ scope. $ on ('to-parent', ฟังก์ชั่น (เหตุการณ์, ข้อมูล) {console.log ('broctrl', ข้อมูล); // ค่าไม่ได้รับจากระดับ});ผลลัพธ์สุดท้าย
ผู้ปกครอง
เด็กเด็ก
$ EMIT และ $ Broadcast สามารถผ่านพารามิเตอร์หลายตัวและ $ ON ยังสามารถรับพารามิเตอร์หลายตัวได้
พารามิเตอร์เหตุการณ์เหตุการณ์ในวิธี $ on คุณสมบัติของวัตถุและวิธีการดังต่อไปนี้
| คุณสมบัติของเหตุการณ์ | วัตถุประสงค์ |
|---|---|
| Event.targetScope | ขอบเขตของการเปล่งหรือเผยแพร่เหตุการณ์ดั้งเดิม |
| Event.currentscope | ขอบเขตของเหตุการณ์ที่กำลังดำเนินการในปัจจุบัน |
| Event.Name | ชื่อเหตุการณ์ |
| Event.stoppropagation () | ฟังก์ชั่นที่ป้องกันไม่ให้เกิดเหตุการณ์จากการแพร่กระจายเพิ่มเติม (เดือด/จับภาพ) (ใช้ได้เฉพาะกับเหตุการณ์ที่ปล่อยออกมาด้วย `$ emit ') |
| Event.preventDefault () | วิธีนี้ไม่ได้ทำอะไรเลย แต่จะตั้งค่า `defaultprevented 'เป็นจริง ไม่ได้ตรวจสอบค่าของ `defaultprevented 'จนกว่าผู้ดำเนินการของผู้ฟังเหตุการณ์จะดำเนินการ |
| Event.defaultprevented | จริงถ้า `preventDefault` เรียกว่า |
รู้สึกสะดวกกว่าการสื่อสารบริการในตัวควบคุมที่แตกต่างกัน ~~
ข้างต้นเป็นการรวบรวมข้อมูลเกี่ยวกับ Angularjs $ on, $ emit และ $ ออกอากาศ เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!