AngularJS ได้จัดทำวิธีการต่าง ๆ เช่นคำสั่งและบริการบริการเพื่อตระหนักถึงการแบ่งปันและนำข้อมูลและรหัสซ้ำ อย่างไรก็ตามในการพัฒนาโครงการจริงอาจเป็นเพราะความขี้เกียจหรือเพื่อความสะดวกคุณจะต้องการสื่อสารการแบ่งปันข้อมูลโดยตรงระหว่างตัวควบคุมสองตัวหรือฟังก์ชั่นและวิธีการโทร ที่นี่เราจะเห็นว่าวิธีการใดที่สามารถตอบสนองความต้องการนี้ได้
บริการซิงเกิลตัน
Singleton Service เป็นวิธีการแบ่งปันข้อมูลและรหัสที่สนับสนุนโดย AngularJS เอง เนื่องจากเป็นซิงเกิลตันคอนโทรลเลอร์ทั้งหมดจึงเข้าถึงข้อมูลเดียวกัน ตัวอย่างเช่นบริการต่อไปนี้สามารถนำไปใช้:
Angular .Module ('App') .Service ('ObjectService', [ObjectService]); ฟังก์ชัน ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; - ในคอนโทรลเลอร์หนึ่งตัวที่ตั้งค่าโดย ObjectService.set('i', 1) สามารถรับได้ผ่าน ObjectService.get('i') ในตัวควบคุมอื่น
การออกอากาศและกิจกรรม
ใน AngularJS พารามิเตอร์สามารถส่งผ่านเมื่อเรียกเหตุการณ์และส่งออกอากาศ คุณลักษณะนี้สามารถใช้เพื่อตระหนักถึงการแบ่งปันข้อมูล มีสามวิธีที่เกี่ยวข้องกับเหตุการณ์และการออกอากาศคือ:
1. $ emit (): เหตุการณ์ทริกเกอร์สามารถส่งข้อมูลขึ้นไปได้เช่นตัวควบคุมเด็กไปยังคอนโทรลเลอร์หลักและคอนโทรลเลอร์ไปยัง $ rootscope
2. $ broadcast (): ส่งการออกอากาศซึ่งสามารถส่งผ่านข้อมูลลงตัวอย่างเช่นคอนโทรลเลอร์หลักส่งข้อมูลไปยังตัวควบคุมเด็กหรือ $ rootscope ส่งผ่านข้อมูลไปยังคอนโทรลเลอร์ใด ๆ
3. $ on (): ฟังกิจกรรมและการออกอากาศและสามารถจับ $ emit และ $ ออกอากาศ
การสื่อสารระหว่างคอนโทรลเลอร์สามารถแบ่งออกเป็นสามสถานการณ์:
1. ไม่มีตัวควบคุมการเชื่อมโยงโดยตรง: ใช้ $ rootscope. $ emit (), $ rootscope. $ boardcast () หรือ $ scope. $ emit เพื่อปล่อยข้อมูลและรับข้อมูลผ่าน $ rootscope $ on ()
2. คอนโทรลเลอร์หลักไปยังตัวควบคุมเด็ก: ตัวควบคุมหลักใช้ $ SCOPE. $ BORADCAST () เพื่อส่งข้อมูลและตัวควบคุมเด็กใช้ $ SCOPE $ ON () เพื่อรับข้อมูล
3. ตัวควบคุมเด็กไปยังตัวควบคุมหลัก: ตัวควบคุมเด็กใช้ $ SCOPE. $ emit () เพื่อส่งข้อมูลและตัวควบคุมหลักได้รับข้อมูลผ่าน $ SCOPE $ on ()
นี่คือการใช้งานง่าย ๆ :
// หนึ่ง controllangular .module ('app'). controller ('oneController', ['$ scope', oneController]); ฟังก์ชั่น oneController ($ scope) {var data = {ค่า: 'ทดสอบ'}; $ rootscope. $ broadcast ('open.notice.editor', data);} // อื่น ๆ controllangular .module ('app'). controller ('othercontroller', ['$ scope', othercontroller]; ฟังก์ชั่นอื่น ๆ $ SCOPE. $ emit (ประกาศ. editor.opened ');});}ผู้ควบคุม
หากคอนโทรลเลอร์ทั้งสองแบ่งปันคอนโทรลเลอร์หลักเดียวกันเข้าด้วยกันการแบ่งปันข้อมูลและการสื่อสารสามารถทำได้ผ่านตัวควบคุมหลัก ตัวอย่างเช่น:
<div ng-controller = "ParentController"> <div ng-controller = "childonecontroller"> </div> <div ng-controller = "childTwocontroller"> </div> </div>
// คอนโทรลเลอร์หลัก Angular .Module ('App') .Controller ('ParentController', ['$ scope', ParentController]); ฟังก์ชั่น ParentController ($ scope) {// ตัวแปรสำหรับการผ่านข้อมูล ['$ scope', ChildOnecontroller]); ฟังก์ชั่น ChildOnecontroller ($ scope) {// การตั้งค่าข้อมูล $ scope. $ parent.data = 1;} // ChildController Angular .Module ('App') ChildTwocontroller ($ scope, $ timeout) {$ timeout (function () {// data อ่าน console.log ($ scope. $ parent.data);}, 1000);}ตัวแปรทั่วโลกหรือที่ใช้ร่วมกัน
AngularJS ให้การห่อหุ้มตัวแปรสองตัวคือ $ window และ $ localstorage โดยการแก้ไขและฟังค่าทั้งสองนี้การแบ่งปันข้อมูลและการสื่อสารระหว่างคอนโทรลเลอร์สามารถทำได้ วิธีนี้มีดังนี้:
// one controllangular .module ('app'). controller ('oneController', ['$ scope', '$ window', onecontroller]); ฟังก์ชั่น oneController ($ scope, $ window) {// การตั้งค่าข้อมูล $ data.data = 1; ['$ scope', อีกคนหนึ่ง]); ฟังก์ชั่นอื่น controller ($ scope) {// ฟังการแก้ไข $ scope. $ watch (function () {return $ window.data;}, ฟังก์ชั่น (n) {$ scope.windowData = n;});};};ในความเป็นจริงวิธีการตรวจสอบและแก้ไขนี้ยังสามารถใช้ในวิธีการสื่อสารอื่น ๆ
การผูกมัดองค์ประกอบ
ใน AngularJS คุณสามารถรับอินสแตนซ์คอนโทรลเลอร์ได้ผ่านองค์ประกอบ วิธีนี้คุณสามารถรับได้อย่างรวดเร็ว
แก้ไขข้อมูลในคอนโทรลเลอร์หรือเรียกใช้วิธีการในคอนโทรลเลอร์นี้ ตัวอย่างเช่น:
<div ng-controller = "AppController"> <div id = "div-a"> </div> </div>
คุณสามารถรับอินสแตนซ์คอนโทรลเลอร์ผ่านวิธีการต่อไปนี้:
var instance = angular.element (document.getElementById ('div-a')). scope ();จากนั้นคุณสามารถใช้ อินสแตนซ์ นี้เพื่อเรียกใช้วิธีการของคอนโทรลเลอร์เพื่อรับและแก้ไขค่า เป็นไปไม่ได้ที่จะได้รับความสำเร็จไม่ว่าองค์ประกอบจะถูกผูกไว้กับคอนโทรลเลอร์หรือองค์ประกอบหลักขององค์ประกอบจะต้องมีคอนโทรลเลอร์
ทั้งหมดนี้เกี่ยวกับการแบ่งปันข้อมูลและการสื่อสารระหว่างตัวควบคุมเชิงมุม เพื่อนที่มีความสนใจในความรู้ในการแบ่งปันข้อมูลใน AngularJs สามารถเรียนรู้ร่วมกันได้ ขอบคุณสำหรับการสนับสนุน Wulin.com