Angularjs $ on, $ emit และ $ การใช้ออกอากาศ

ขอบเขตใน AngularJS มีโครงสร้างแบบลำดับชั้นและมีการซ้อนกันมาก พวกเขาทั้งหมดมี $ rootscope หลัก (นั่นคือแอปพลิเคชันเชิงมุมที่สอดคล้องกันหรือ NG-APP) และจากนั้นชิ้นส่วนขอบเขตอื่น ๆ ทั้งหมดจะสืบทอดมาจาก $ rootscope นี้หรือพวกเขาซ้อนอยู่ภายใต้ขอบเขตหลัก หลายครั้งคุณจะพบว่าขอบเขตเหล่านี้ไม่ได้แบ่งปันตัวแปรหรือสืบทอดอะไรจากต้นแบบอื่น

ดังนั้นในกรณีนี้คุณสื่อสารระหว่างขอบเขตได้อย่างไร? ตัวเลือกหนึ่งคือการสร้างบริการ Singleton ในขอบเขตแอปพลิเคชันจากนั้นจัดการการสื่อสารสำหรับ subscopes ทั้งหมดผ่านบริการนี้

มีตัวเลือกอื่นใน AngularJs: จัดการการสื่อสารผ่านเหตุการณ์ในขอบเขต แต่วิธีการนี้มีข้อ จำกัด บางประการ ตัวอย่างเช่นคุณไม่สามารถกระจายเหตุการณ์ไปยังขอบเขตของการตรวจสอบทั้งหมดได้อย่างกว้างขวาง คุณต้องเลือกว่าจะสื่อสารกับขอบเขตหลักหรือขอบเขตเด็ก

$ on, $ emit และ $ broadcast ทำให้การถ่ายโอนเหตุการณ์และข้อมูลระหว่างคอนโทรลเลอร์ง่าย

1. $ emit สามารถส่งผ่านเหตุการณ์และข้อมูลไปยังตัวควบคุมหลักได้
2. การออกอากาศ $ สามารถส่งผ่านเหตุการณ์และข้อมูลไปยังตัวควบคุมเด็ก
3. $ on ใช้เพื่อรับเหตุการณ์และข้อมูล

ตัวอย่างมีดังนี้

รหัส 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 คุณสมบัติของวัตถุและวิธีการดังต่อไปนี้

รู้สึกสะดวกกว่าการสื่อสารบริการในตัวควบคุมที่แตกต่างกัน ~~

ข้างต้นเป็นการรวบรวมข้อมูลเกี่ยวกับ Angularjs $ on, $ emit และ $ ออกอากาศ เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!