قدمت AngularJS نفسها طرقًا مثل التوجيه وخدمة الخدمة لتحقيق مشاركة وإعادة استخدام البيانات والرمز. ومع ذلك ، في تطوير المشروع الفعلي ، ربما بسبب كونك كسولًا أو للراحة ، ستحتاج دائمًا إلى توصيل مشاركة البيانات مباشرة بين وحدات التحكم أو وظائف الاتصال والأساليب. هنا سنرى الأساليب التي يمكن أن تفي بهذا المطلب.
خدمة المفرد
Singleton Service هي طريقة لمشاركة البيانات والرمز التي تدعمها AngularJS نفسها. لأنها مفردة ، جميع وحدات التحكم تصل إلى نفس البيانات. على سبيل المثال ، يمكن تنفيذ الخدمة التالية:
Angular .Module ('app') .Service ('ObjectService' ، [ObjectService]) ؛ function ObjectService () {var list = {} ؛ إرجاع {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 و $ broadcast
يمكن تقسيم التواصل بين وحدات التحكم إلى ثلاث حالات:
1. لا يوجد وحدة تحكم مباشرة في الجمعية: استخدم $ rootscope. $ emit () ، $ rootscope. $ boardcast ()
2. وحدة تحكم الوالدين إلى مراقب الطفل: يستخدم وحدة التحكم الأصل نطاق $. $ boradcast () لإرسال البيانات ، وتستخدم وحدة تحكم الطفل نطاق $. $ on () للحصول على البيانات
3. وحدة تحكم الطفل إلى وحدة تحكم الوالدين: تستخدم وحدة تحكم الطفل نطاق $ .
فيما يلي الاستخدامات البسيطة:
// One ControlRangular .Module ('app') .Controller ('OneController' ، ['$ scope' ، onecontroller]) ؛ function OneController ($ scope) {var data = {value: 'test'} ؛ $ rootscope. $ broadcast ('Open.Notice.Editor' ، data) ؛} // أخرى controlRangular .Module ('app') .Controller ('othercontroller' ، ['$ scope' ، analycontroller]) ؛ $ scope.Open (Data) ؛مراقب الوالدين
إذا شارك كلا وحدة التحكم في نفس وحدة تحكم الوالدين معًا ، فيمكن تنفيذ مشاركة البيانات والاتصالات من خلال وحدة التحكم الأصل. على سبيل المثال:
<div ng-controller = "parentController"> <div ng-controller = "childonecontroller"> </div> <div ng-controller = "childtwocontroller"> </viv>
// وحدة تحكم الأصل Angular .Module ('app') .Controller ('parentController' ، ['$ scope' ، parentController]) ؛ وظيفة parentController (scope $) {// variable لتمرير data $ scope.data = null ؛ ['$ scope' ، childonecontroller]) ؛ وظيفة childoneController (scope $) {// إعداد البيانات $ scope. $ parent.data = 1 ؛} // childcontroller Angular .module ('app ". childtwocontroller (scope $ ، $ timeout) {$ timeout (function () {// data read console.log ($ scope. $ parent.data) ؛} ، 1000) ؛}المتغيرات العالمية أو المشتركة
يوفر AngularJS تغليف لمتغيرين ، نافذة $ و $ localstorage . من خلال تعديل هذه القيمتين والاستماع إليها ، يمكن تحقيق مشاركة البيانات والاتصال بين وحدات التحكم. الطريقة كما يلي:
// One ControlRangular .Module ('app') .Controller ('OneController' ، ['$ scope' ، '$ window' ، oneController]) ؛ function Onecontroller ($ scope ، $ window) {// data setting $ window.data = 1 ؛ ['$ scope' ، othercontroller]) ؛ وظيفة othercontroller (scope $) {// استمع لتعديل $ scope. $ watch (function () {return $ window.data ؛} ، function (n) {$ scope.windowdata = n ؛}) ؛}في الواقع ، يمكن أيضًا استخدام طريقة المراقبة والتعديل هذه في طرق اتصال أخرى.
ملزمة العنصر
في AngularJS ، يمكنك الحصول على مثيل وحدة التحكم عليه من خلال عنصر. بهذه الطريقة يمكنك الحصول عليها بسرعة
قم بتعديل البيانات في وحدة تحكم ، أو اتصل بالطرق في وحدة التحكم هذه. على سبيل المثال:
<div ng-controller = "AppController"> <div id = "div-a"> </viv> </viv>
يمكنك الحصول على مثيل وحدة التحكم من خلال الطرق التالية:
var مثيل = Angular.Element (document.getElementById ('div-a')). scope () ؛بعد ذلك ، يمكنك استخدام هذا المثيل لاستدعاء طريقة وحدة التحكم للحصول على القيمة وتعديلها. لا يمكن أن يكون من الممكن الحصول على نجاح ما إذا كان العنصر نفسه لا بد أن يكون لديه وحدة تحكم أو أن العنصر الوالد للعنصر ليس له وحدة تحكم.
هذا كله عن مشاركة البيانات والتواصل بين وحدات التحكم الزاوية. يمكن للأصدقاء المهتمين بمعرفة مشاركة البيانات في AngularJS التعلم معًا. شكرا لك على دعمك إلى wulin.com.