تحليل شامل للتوجيهات في AngularJS (يجب القراءة)

عندما يتعلق الأمر بـ AngularJS ، فإن أول ما نفكر فيه هو نظام ربط وتعليمات البيانات ثنائية الاتجاه ، والتي هي أيضًا الجوانب الأكثر جاذبية من AngularJS. أما بالنسبة لربط البيانات ثنائية الاتجاه ، أشعر أنه لا يوجد شيء أقوله. لذلك سنناقش اليوم باختصار نظام التعليمات لإطار AngularJS. أنا أيضًا مبتدئ واستشرت بعض المعلومات. إذا كان هناك بعض الأشياء السيئة ، أشار وان وانغ.

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

1. استخدم كعنصر HTML جديد.

 <hyly> </hysh> أو <hello/>

2. استخدم كسمات لعنصر

 <div hello> </viv>

3. استخدم كطبق عنصر

 <viv> </viv>

4. استخدم كتعليقات

 <!-التوجيه: مرحبًا->

لاحظ أن هناك فخًا هنا ، وهو أن يكون لديك مساحة بعد "التوجيه: مرحبًا" ، وإلا فإنه سيكون عديم الفائدة. في الوقت نفسه ، يوصى باستخدام أساليب التعليقات التوضيحية الأقل. إذا كان عليك متابعة جودة عالية ، فأنت غير رسمي. نظرًا لأن الإرشادات لها أشكال التعبير الأربعة المذكورة أعلاه ، فكيف تحددها على وجه التحديد؟

 .directive ('hello' ، function () {return {rodict: 'aecm' ، template: '<button> انقر فوق لي </button>'}})

ما سبق هو أبسط رمز لتحديد التوجيه ، لا شك في ذلك. في الكود أعلاه ، تحدد طريقة التوجيه () تعليمة جديدة. الطريقة لها معلمتان. أول "مرحبا" هو تحديد أن اسم التعليمات هو مرحبا ، والمعلمة الثانية هي الوظيفة التي تُرجع كائن التعليمات. لذلك في الكود أعلاه ، تستخدم الوظيفة خصائصين بشكل أساسي لتحديد هذا التوجيه Hello:

1. يتم استخدام سمة تقييد [سلسلة] بشكل أساسي لتحديد شكل التعبيرات التي يمكن استخدامها في رمز HTML. يمثل A السمات ، ويمثل E عناصر ، ويمثل C الفصول ، ويمثل M التعليقات. في المواقف الفعلية ، نستخدم عمومًا طريقتي AE.

2. تحدد سمة القالب [السلسلة أو الدالة] علامة HTML التي تم إنشاؤها بواسطة الأمر بعد تجميعها وربطها بواسطة Angular. يمكن أن تكون هذه السمة بسيطة مثل نص HTML واحد فقط في الداخل ، أو يمكن أن تكون معقدة بشكل خاص. عندما تكون قيمة السمة دالة ، تقوم الطريقة بإرجاع سلسلة تمثل القالب ، ويمكن أيضًا استخدام التعبير {{}}.

 قالب: function () {return '<butten> انقر فوق لي </button>' ؛ }

ولكن بشكل عام ، سيتم استبدال سمة القالب بـ templateurl ، ويستخدم للإشارة إلى عنوان ملف خارجي ، لذلك عادة ما نضع القالب في ملف HTML خارجي ، ثم نستخدم templateurl للإشارة إليه.

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

1. سمة الأولوية [رقم] ، يتم استخدام هذه السمة لتحديد أولوية التعليمات المخصصة. عندما يكون هناك أكثر من تعليمات واحدة على عنصر DOM ، تحتاج إلى مقارنة أولوية التعليمات. يتم تنفيذ التعليمات ذات الأولوية الأعلى أولاً. يتم استخدام هذه الأولوية لفرز وظيفة التجميع قبل تنفيذ التعليمات. لذلك سوف نتحدث عن وظيفة التجميع بعناية أدناه.

2. سمة الطرفية [Boolean] ، يتم استخدام هذه المعلمة لتحديد ما إذا كان سيتم إيقاف التعليمات على العنصر الحالي والتي لها أولوية أقل من هذه التعليمات. إذا كانت القيمة صحيحة ، فهي طبيعية. يتم تنفيذها بترتيب الأولوية. إذا تم تعيينه على خطأ ، فلن يتم تنفيذ تعليمات حول العنصر الحالي الذي يكون له أولوية أقل من هذه التعليمات.

3. استبدال السمة [Boolean] ، يتم استخدام هذه السمة لتحديد ما إذا كان محتوى HTML الذي تم إنشاؤه يحل محل عنصر HTML الذي يحدد هذا التوجيه. عندما نضع قيمة هذه الخاصية على صواب ، افتح وحدة التحكم والنظر إليها ، ستجد أن العنصر الذي تم إنشاؤه بواسطة هذه التعليمات سيبدو مثل هذا:

عندما نشرع في خطأ ، سيبدو هكذا:

.

4. رابط [وظيفة] السمة. في المثال أعلاه ، فإن الأمر الذي قمنا بتخصيصه في الواقع ليس له معنى كبير. هذا هو مجرد أبسط أمر. هناك العديد من السمات التي لم نحددها لها ، لذلك فهي ليست ذات فائدة كبيرة. على سبيل المثال ، تتضمن وظيفة الارتباط هذه ثلاث معلمات: النطاق والعنصر والأمهات. تُستخدم وظيفة الارتباط هذه بشكل أساسي لإضافة مراقبة الأحداث إلى عناصر DOM ، ومراقبة تغييرات سمة النموذج ، وتحديث DOM. لديها ثلاث معلمات:

1: معلمة النطاق. عندما لا نحدد سمات النطاق للتعليمات ، فإنه يمثل نطاق وحدة التحكم الأصل.

2: معلمة العنصر هي jqlite (مجموعة فرعية من jQuery) من التعليمات للف عنصر DOM. إذا قمت بتقديم jQuery قبل تقديم AngularJS ، فإن هذا العنصر هو عنصر jQuery ، وليس عنصر JQlite. نظرًا لأن هذا العنصر قد تم لفه jQuery/JQLite ، لم نعد بحاجة إلى استخدام $ () للفه عند إجراء عمليات DOM.

ثلاثة: معلمة attrs ، التي تحتوي على كائن المعلمة الموحد لسمات العنصر الذي يوجد فيه التوجيه.

5. يتم استخدام السمة النطاق [المنطقي أو الكائن] لتحديد نطاق التعليمات. إنه خطأ بشكل افتراضي. وهذا يعني ، أن التعليمات ترث نطاق وحدة التحكم الأصل. يمكنك استخدام السمات في نطاق وحدة تحكم الوالدين حسب الرغبة ، ولكن بهذه الطريقة ، سوف يلوث السمات في نطاق الوالدين ، وهو أمر غير مستحسن. حتى نتمكن من ترك النطاق يأخذ القيمتين التاليتين: True و {}.

عندما يكون صحيحًا ، فهذا يعني أن Angular يخلق نطاقًا ورثًا من نطاق الوالدين للتعليم.

 var myapp = Angular.module ('myapp' ، []) .Controller ('myctrl' ، ['$ scope' ، function ($ scope) {$ scope.color = 'red' ؛ style = "background-color: {{color}}"> انقر فوق لي </button> '، النطاق: TRUE ، الرابط: الدالة (النطاق ، العناصر ، attrs) {elements.bind (' click '، function () {elements.css (' background-color '،' blue ') ؛}}}}}}}}}}}}}}}}}}}}}}}}})

هنا نحدد سمة اللون لنطاق الوالد ونخصصه باللون الأحمر. في سمة النطاق لتوجيه Hello ، نقدم صحيحًا ، لذلك يخلق Angular نطاقًا ورثًا من نطاق الوالدين لهذا التوجيه. ثم في سمة القالب ، نستخدم {{}} لاستخدام سمة اللون الموروثة من نطاق الأصل ، لذلك سيكون الزر أحمر.

عندما يكون {} ، فهذا يعني أنه يتم إنشاء نطاق معزول ولن يتم توريث خصائص نطاق الوالد. لكن في بعض الأحيان نحتاج أيضًا إلى الوصول إلى الخصائص أو الأساليب في نطاق الوالدين ، فماذا يجب أن نفعل؟ لقد فكر الزاوي منذ فترة طويلة في هذا بالنسبة لنا. هناك ثلاث طرق لتذكر العمليات المذكورة أعلاه:

1: استخدم @ لتنفيذ الربط في اتجاه واحد. إذا قمنا فقط بإعطاء نطاق هذه القيمة {} ، فإن لون خلفية الزر في الرمز أعلاه سيكون رماديًا. ، وإذا كنا بحاجة إلى استخدام سمة اللون لنطاق الأصل ، فيمكننا كتابة هذا:

 النطاق {color: '@color'}

 <hello color = "{{color}}"> </hy hello>

هناك نقطتان يجب ملاحظتهما هنا: 1. يمثل لون الخصائص في النطاق اللون في التعبير {{}} ، ويجب أن يكون الاثنان متسقين. 2. قيمة لون السمة في النطاق ، أي اللون بعد @، تمثل لون السمة في عنصر HTML أدناه ، لذلك يجب أن يكون الاثنان متسقين أيضًا. إذا كان اسم السمة هنا هو نفس الاسم المستخدم في التعبير {{}} في القالب ، يمكن حذف اسم السمة بعد @ في النموذج التالي.

 النطاق {color: '@'}

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

اثنان: استخدام = لتنفيذ الربط ثنائي الاتجاه

 .diRective ('hello' ، function () {return {rodit: 'aecm' ، استبدال: صواب ، القالب: '<button style = "background-color: {{color}}"> انقر فوق لي </button>' ، Scope: {color: '='} ، link: function ، element. العناصر.

 <hello color = "color"> </hello> <input type = "text" ng-model = "color"/>

هنا لدينا ربط في اتجاهين سمة اللون في نطاق التعليمات وسمة اللون في نطاق الأصل ، وأضف حدث نقرة إلى وظيفة ارتباط التعليمات. سيؤدي النقر فوق الزر إلى تغيير لون الزر ، وتغيير قيمة سمة اللون لنطاق التعليمات ، ثم إضافة علامة إدخال إلى صفحة HTML ، أو إخراج أو إدخال قيمة سمة اللون لنطاق الأصل. هناك مكان يجب ملاحظته هنا: لا تحتاج قيمة اسم سمة العنصر الحالي إلى إضافة التعبير {{}} ، لأن نطاق الوالدين هنا يمرر نموذج بيانات النطاق الحقيقي ، وليس سلسلة بسيطة ، حتى نتمكن من تمرير سلاسل بسيطة ، وحتى كائنات معقدة إلى نطاق التعليمات. الآن دعنا نرى ما يحدث عند النقر فوق هذا الزر.

هنا يمكننا أن نرى أن لون الزر قد تغير إلى اللون الوردي ، مما يعني أن النقر يغير سمة اللون لنطاق الأمر ، مما يؤدي إلى تغيير لون الزر. ولكن هنا ليس فقط الزر الذي تغير. أصبحت الانتباه إلى القيمة في نموذج الإدخال ورديًا أيضًا ، مما يعني أن سمة اللون لنطاق الوالد قد تغيرت أيضًا. بالإضافة إلى ذلك ، دعنا ندخل لونًا في الإدخال لمعرفة التغييرات التي حدثت.

، يمكن ملاحظة أنه عندما ندخل لونًا آخر في النموذج ، يتغير لون الزر أيضًا ، مما يعني أنه تم تغيير سمة اللون لنطاق الأمر. باختصار ، يمكننا أن نجد أن استخدام "=" هو ربط ثنائي الاتجاه.

ثلاثة: استخدم واستدعاء الطريقة في نطاق الوالدين

 var myapp = Angular.module ('myapp' ، []) .Controller ('myctrl' ، ['$ scope' ، function ($ scope) {$ scope.color = 'red' استبدل: صواب ، قالب: "<button ng click =" sayhello () "style =" background-color: {{color}} "> انقر فوق لي </button> '، النطاق: العناصر.

 <hello color = "color" sealhello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>

هنا لدينا أيضًا شيئان يجب ملاحظة: 1. لا نحتاج فقط إلى استخدام توجيه NG-Click في القالب لربط الطريقة في نطاق الوالدين المراد استدعاؤهما ، ولكن أيضًا إضافة خاصية إلى العنصر الحالي ، وتشير هذه الخاصية إلى طريقة نطاق الوالد المطلوب استدعاؤها. 2. SENETHELLO الثلاثة من سمة نطاق التعليمات ، سمة العنصر الحالي تقول HELLO ، ويجب أن يكون اسم طريقة الحدث الذي يربط القالب متسقًا. ثم يمكننا النقر فوق الزر ومربع حوار يبرز.

6. سمة Transclude [Boolean] ، يتم استخدام هذه السمة للسماح لنا بتحديد ما إذا كان التوجيه يمكن أن يحتوي على أي محتوى

 .directive ('hello' ، function () {return {rodort: 'aecm' ، استبدال: true ، transclude: true ، scope: {} ، template: '<div ng-transclude> </viv>' ،}})

 <hyly> Hello <span> {{color}} </span> </hysh>

عندما تكون قيمتها صحيحة ، هذا هو إخراج القيمة في الصفحة. عندما يكون خطأ ، ستكون الصفحة فارغة. هناك مكان للانتباه إلى هنا ، وهو <span> {{color}} </span>. اللون هنا هو اللون في نطاق الوالدين. إنها ليست سمة لون النطاق في التوجيه.

7. تجميع المعلمة [وظيفة]. تحتوي هذه الطريقة على عنصر معلمتان ، attrs. يشير عنصر المعلمة الأول إلى العنصر الذي توجد فيه التعليمات ، ويشير الأملان الثاني إلى القائمة الموحدة للمعلمات المعينة على العنصر. هنا لدينا أيضًا مكان للملاحظة: لا يمكن للدالة الترويجية الوصول إلى نطاقها ويجب إرجاع وظيفة الارتباط. ومع ذلك ، إذا لم يتم تعيين وظيفة الترجم ، فيمكنك تكوين وظيفة الارتباط بشكل طبيعي (مع ترجمة ، لا يمكنك استخدام الارتباط ، يتم إرجاع وظيفة الارتباط عن طريق الترجمة).

 .directive ('hello' ، function () {return {restrict: 'aecm' ، استبدال: صواب ، ترجمة: صواب ، القالب: '<button ng-click = "sayhello ()" style = "background-color: {{color}}"> انقر لي </buttan (النطاق ، العناصر ، attrs) {elements.bind ('click' ، function () {elements.css ('background-color' ، 'Blue') ؛ scope. $ application () {scope.color = 'Pink' ؛})}} ؛

الآن دعنا نضغط هذا الزر

لقد وجدنا أن ما حدث بعد النقر فوق الزر هنا هو نفس السمة التي استخدمت سمة الارتباط من قبل ، وليس هناك فرق كبير.

في الواقع ، في معظم الحالات ، نحتاج فقط إلى استخدام وظيفة الارتباط. وذلك لأن معظم الإرشادات تحتاج فقط إلى التفكير في تسجيل النموذج ، ونموذج المراقبة ، وتحديث DOM ، والذي يمكن القيام به في وظائف الارتباط. ومع ذلك ، للحصول على تعليمات مثل NG-Repeat ، يجب استنساخ عناصر DOM وتكرارها عدة مرات ، ويتم إجراء وظيفة الترجمة قبل تنفيذ وظيفة الارتباط. فلماذا نحتاج إلى وظيفتين منفصلتين لإكمال عملية التوليد ، ولماذا لا يمكننا استخدام واحدة؟ للإجابة على هذا السؤال جيدًا ، نحتاج إلى فهم كيفية تجميع التوجيهات في Angular!

8. كيف يتم تجميع التعليمات

عند بدء تشغيل تمهيد التطبيق الزاوي الخاص بنا ، سيستخدم Angular خدمة ترجمة $ لاجتياز عنصر DOM. بعد التعرف على جميع الإرشادات ، سيتم استدعاء طريقة ترجمة التعليمات ، وسيتم إرجاع وظيفة الارتباط ، ثم ستتم إضافة وظيفة الارتباط إلى قائمة وظائف الارتباط التي تم تنفيذها لاحقًا. وتسمى هذه العملية مرحلة التجميع. يجب تكرار تعليمات مثل NG-Repeat واستنساخها عدة مرات. يتم تنفيذ وظيفة الترجمة مرة واحدة فقط أثناء مرحلة الترجمة ويتم نسخ هذه القوالب ، ولكن يتم تنفيذ وظيفة الارتباط لكل مثيل منسوخ. حتى نتمكن من التعامل معها بشكل منفصل لتحسين أدائنا (هذه الجملة غير واقعية بعض الشيء ، قمت بنسخها من أماكن أخرى.

9. وحدة التحكم [سلسلة أو دالة] وتتطلب [سلسلة أو سلسلة []] معلمات. عندما نريد السماح للتعليمات الأخرى بالتفاعل مع تعليماتك ، نحتاج إلى استخدام وظيفة وحدة التحكم. عندما يريد توجيه آخر التفاعل ، يحتاج إلى إعلان إشارة إلى مثيل وحدة التحكم في التوجيه الخاص بك.

 .diRective ('hello' ، function () {return {scope: {} ، require: '^he' ، expile: function (element ، attrs) {return function (scope ، elements ، attrs ، cntins) {cntins.fn ()} ؛ (scope $ ، $ compile ، $ http) {this.fn = function () {Alert ('hello') ؛

 <the> <hello color = "color" sealhello = "sayhello ()"> </hysic> </te>>

عند تحميل الصفحة ، سيظهر مربع حوار.

حسنًا ، ما سبق هو ما تعلمته حول التعليمات التي تعلمتها خلال هذه الفترة الزمنية. دعونا نكتب هذا.

التحليل الشامل المذكور أعلاه للتعليمات في AngularJS (يجب أن تقرأ) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.