ใน AngularJS คุณสามารถใช้กลไกการออกอากาศของเหตุการณ์ของ $ Broadcast, $ emit, $ on เพื่อสื่อสารระหว่างขอบเขตที่แตกต่างกัน
แนะนำ:
วัตถุประสงค์ของการออกอากาศ $ คือการเผยแพร่เหตุการณ์จากขอบเขตหลักของแม่ไปยังขอบเขตเด็กรวมถึงตัวเอง รูปแบบมีดังนี้: $ Broadcast (EventName, ARGS)
วัตถุประสงค์ของ $ emit คือการเผยแพร่เหตุการณ์จากขอบเขตเด็กไปยังขอบเขตหลักรวมถึงตัวเองจนถึงขอบเขตราก รูปแบบมีดังนี้: $ emit (EventName, Args)
$ ON ใช้เพื่อตรวจสอบเหตุการณ์ที่แพร่กระจายจากเด็กหรือขอบเขตหลักและข้อมูลที่สอดคล้องกันในขอบเขต รูปแบบมีดังนี้: $ on (event, data)
ในคำอธิบายข้างต้น EventName เป็นชื่อของเหตุการณ์ที่ต้องตรวจสอบเหตุการณ์พารามิเตอร์ในวิธี $ on เป็นวัตถุที่เกี่ยวข้องของเหตุการณ์และข้อมูลคือข้อมูลที่เผยแพร่โดยเหตุการณ์
พารามิเตอร์เหตุการณ์ในวิธี $ on มีคุณสมบัติและวิธีการดังต่อไปนี้
แอตทริบิวต์เหตุการณ์/วิธีการคำอธิบายการทำงาน
| คุณสมบัติเหตุการณ์/วิธีการ | คำอธิบายการทำงาน |
|---|---|
| Event.targetScope | รับขอบเขตของเหตุการณ์การแพร่กระจาย |
| Event.currentscope | รับขอบเขตของเหตุการณ์ที่ได้รับ |
| Event.Name | ชื่อของเหตุการณ์สเปรด |
| Event.stoppropagation () | ป้องกันเหตุการณ์จากการแพร่กระจายของฟองสบู่มีผลเฉพาะใน $ emit events |
| Event.preventDefault () | ป้องกันไม่ให้เกิดเหตุการณ์การแพร่กระจาย |
| Event.defaultprevented | ส่งคืนจริงถ้ามีการเรียกเหตุการณ์ preventDefault |
รหัส:
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> = angular.module ("myapp", []); // คอนโทรลเลอร์ myapp.controller ("ตัวเอง", ฟังก์ชั่น ($ scope, $ window) {// เหตุการณ์การแพร่กระจายของปุ่ม $ scope.toparent = function () {// ลงทะเบียนเหตุการณ์ที่แพร่กระจายขึ้นไป, EventName: 'From Self', Data: OneObject $ scope $ scope.tochild = function () {// ลงทะเบียนเหตุการณ์ที่แพร่กระจายลงไป, EventName: 'From Self', ข้อมูล: OneObject $ SCOPE. $ window.alert ("โหนดปัจจุบัน" + event.currentscope.name + "เหตุการณ์ที่สกัดกั้นจาก" + data.divname + ":" event.name + "ฟังก์ชั่นของมันคือ" + data.description); // คอนโทรลเลอร์พาเรนต์ myapp.controller ("parent", ฟังก์ชั่น ($ scope, $ window) {$ scope.name = "parent"; // $ on ใช้สำหรับเหตุการณ์ $ on $ on ("fromself", ฟังก์ชั่น (event, data) {$ window.alert ( ฟังก์ชั่นคือ " + data.description);}); $ scope. $ on (" fromchild ", ฟังก์ชั่น (เหตุการณ์, ข้อมูล) {$ window.alert (" โหนดปัจจุบัน " + event.currentscope.name +", เหตุการณ์ที่สกัดกั้นจาก " + data.divname +": " // คอนโทรลเลอร์เด็ก myapp.controller ("เด็ก", ฟังก์ชั่น ($ scope, $ window) {$ scope.name = "child"; // $ on ใช้เพื่อสกัดกั้นเหตุการณ์จากขอบเขตหลัก $ scope. $ on ("from selfself", ฟังก์ชั่น (เหตุการณ์, ข้อมูล) {$ window.alert ( Event.name + "ฟังก์ชั่นของมันคือ" data.description);}); </script> </head> <body> <form name = "test"> <div ng-controller = "parent"> นี่คือ parent div <div ng ng-controller = "self"> นี่คือลูก selfdiv <อินพุตประเภท = "ปุ่ม" click = "toparent () ถึง childdiv "/> <div ng-controller =" child "> นี่คือเด็กเด็ก <อินพุตประเภท =" ปุ่ม "ng-click =" totop () "value =" อัพโหลดเหตุการณ์ "/> </div> </div> <div ng-controller =" Borther ">รหัส
ผล:
คุณสมบัติอื่น ๆ :เหตุการณ์ข้างต้นออกอากาศใน AngularJS - การวิเคราะห์ที่ครอบคลุมของการออกอากาศ $, $ emit, $ on เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น