المزالق التي يجب الانتباه إليها عند التعلم النطاق في الزاوية

النطاق الزاوي

في تطبيقات الويب التي تم إنشاؤها باستخدام Angular ، يكون مفهوم النطاق في جميع أنحاءه. ستنشئ العديد من الإرشادات $scope في العرض الزاوي نطاقًا ، مثل NG-APP ، و NG-Controller ، وما إلى ذلك. إنه مفهوم في نموذج العرض. يتم تعريف نموذج البيانات لدينا في النطاق.

حفرة النطاق الزاوي

يجب أن يمر الأشخاص الذين استخدموا Angular بعملية ، أي عندما كانوا مبتدئين في البداية ، رأوا للتو الربط ثنائي الاتجاه للبيانات.

النطاق حفرة 1 في الزاوي

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

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

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

 // html <div ng-controller = "outerctrl"> <span ng-bind = "a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "a"> </spant> <button nglick = "a+1" OuterCtrl ($ scope) {$ scope.a = 1 ؛} وظيفة innerctrl () {}

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

النطاق حفرة 2 في الزاوي

في هذا الوقت ، كان الطفل عاطفيًا بعض الشيء. مشى stackoverflow والوثائق الرسمية. أخيرًا ، وجد أن هناك بالفعل حلًا ، مثل كتابة data.a السمة.

 // html <div ng-controller = "outerctrl"> <span ng-bind = "data.a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "data.a"> </span> <button ng-lick = "data.a+1" OuterCtrl ($ scope) {$ scope.data = {a: 1} ؛} innerctrl () {}

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

يجب ملء الحفرة دائمًا

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

باختصار ، هنا يمكننا أن ننظر إلى المثال الأول على النحو التالي:

 دالة OUTERCTRL () {this.a = 1 ؛} الدالة innerctrl () {} var outer = new OuterCtrl () ؛ innerctrl.prototype = Outer ؛ var inner = new innerctrl () ؛ inner.a = inner.a + 1 ؛

هنا ، قمنا بتعيين كائن النموذج الأولي لمؤسس وحدة التحكم الداخلية على كائن النطاق الخارجي ، بحيث يرث كائن النطاق الداخلي الذي تم إنشاؤه الخاصية الخاصية A في الكائن الخارجي الخارجي. هذه الخاصية هي قيمة النوع الأساسي. عند الوصول إلى الخاصية A للكائن الداخلي ، نظرًا لأن الكائن الداخلي نفسه لا يحتوي على مثل هذه السمات ، فسيبحث عن كائنه النموذجي. هناك مثل هذه السمة في كائن النموذج الأولي الخارجي ، وبالتالي فإن قيمة الإرجاع ليست مشكلة ، ولكن إذا قمنا بتعيين قيمة للخاصية A لكائن النطاق الداخلي ، فسوف تنشأ المشكلة. inner.a = inner.a + 1; يستمر هذا البيان فعليًا العملية المذكورة أعلاه للعثور على قيمة الخاصية A ، ثم يعين القيمة التي تم إرجاعها إلى خاصية كائن النطاق الداخلي. نظرًا لأن الخاصية A غير موجودة ، يتم إنشاء خاصية قيمة النوع الأساسي لـ A ، وتمنع الخاصية A في كائن النطاق الخارجي الخارجي ، وتخرج هذه الحفرة.

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

لخص

ما سبق هو كل شيء عن المزالق التي تحتاج إلى الانتباه إلى الزاوي. آمل أن يكون محتوى هذه المقالة مفيدًا للجميع للتعرف على النطاق في Angular.