AngularJS $ ON ، $ EMIT واستخدام البث $

النطاق في AngularJS له هيكل هرمي للغاية ومتغير. لديهم جميعًا ootscope $ $ (أي ، التطبيق الزاوي المقابل أو تطبيق ng-app) ، ثم يتم توريث جميع أجزاء النطاق الأخرى من هذا $ rootscope ، أو أنها متداخلة تحت النطاق الرئيسي. في كثير من الأحيان ، ستجد أن هذه النطاقات لا تشارك المتغيرات أو ترث أي شيء من نموذج أولي آخر.

لذلك في هذه الحالة ، كيف تتواصل بين النطاقات؟ يتمثل أحد الخيارات في إنشاء خدمة Singleton في نطاق التطبيق ثم التعامل مع الاتصالات لجميع الأقواس الفرعية من خلال هذه الخدمة.

هناك خيار آخر في AngularJS: التعامل مع الاتصالات من خلال الأحداث في النطاق. لكن هذا النهج له بعض القيود. على سبيل المثال ، لا يمكنك نشر الأحداث على نطاق واسع إلى نطاق جميع المراقبة. يجب عليك اختيار ما إذا كنت تريد التواصل مع نطاق الوالد أو نطاق الطفل.

$ ON ، $ SEIT و $ Broadcast يجعل تحويل الحدث والبيانات بين وحدات التحكم بسيطة.

1. يمكن لـ $ EMIT تمرير الحدث والبيانات فقط إلى وحدة تحكم الوالدين
2. يمكن للبث $ تمرير الحدث والبيانات فقط إلى وحدة تحكم الطفل
3. يستخدم $ ON لتلقي الحدث والبيانات

الأمثلة على النحو التالي

رمز HTML

 <div ng-controller = "parentctrl"> <!-parent-> <div ng-controller = "selfctrl"> <!- <!-الأصل-> </div>

رمز JS

 app.controller ('selfCtrl' ، function ($ scope) {$ scope.click = function () {$ scope. $ broadcast ('to-child' ، 'child') ؛ $ scope. $ emit ('to-parent' ، '$ on') ؛}}) ؛ الوظيفة (الحدث ، البيانات) {console.log ('parentCtrl' ، البيانات) ؛ $ scope. $ on ('to-child' ، function (event ، data) {console.log ('childctrl' ، data) ؛ // يمكن للطفل الحصول على القيمة}) ؛ وظيفة (نطاق $) {$ scope. $ على (إلى الأمام "، الوظيفة (الحدث ، البيانات) {console.log ('broctrl' ، البيانات)

النتيجة النهائية

ParentCtrl الوالد

طفل الطفل

يمكن أن تمرير $ EMIT و $ البث معلمات متعددة ، ويمكن أيضًا الحصول على معلمات متعددة.

معلمة الحدث في الأسلوب $ على الطريقة ، فإن خصائص الكائنات وطرقها هي كما يلي

إنه شعور أكثر ملاءمة من اتصال الخدمة في وحدات تحكم مختلفة ~~

ما سبق هو مجموعة من المعلومات على AngularJS $ على ، $ EMIT وبث $. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!