نطاق AngularJS (النطاق)
النطاق هو الارتباط بين HTML (View) و JavaScript (وحدة التحكم).
النطاق هو كائن له الطرق والخصائص المتاحة.
يمكن تطبيق النطاق على وجهات النظر ووحدات التحكم.
كيفية استخدام النطاق
عند إنشاء وحدة تحكم في AngularJS ، يمكنك تمرير كائن نطاق $ كمعلمة:
مثيل AngularJS
تتوافق الخصائص الموجودة في وحدة التحكم مع الخصائص في العرض:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> {{carname}}} </div> <script> var app = angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.carname = "volvo" ؛ يتوافق مع الاسم المستخدم في العرض في {{}}. </p> </body> </htmlنتائج التشغيل:
فولفو
قم بإنشاء اسم سمة "Carname" في وحدة التحكم ، والذي يتوافق مع الاسم المستخدم في العرض في {{}}.
عند إضافة كائن نطاق $ إلى وحدة التحكم ، يمكن للعرض (HTML) الحصول على هذه الخصائص.
في العرض ، لا تحتاج إلى إضافة بادئة Scope $ ، تحتاج فقط إلى إضافة اسم السمة ، مثل: {{carname}}.
نظرة عامة على نطاق
تكوين تطبيق AngularJS كما يلي:
عرض (عرض) ، وهذا هو ، html.
النموذج ، البيانات المتاحة في العرض الحالي.
وحدة التحكم ، أي وظيفة JavaScript ، يمكنها إضافة أو تعديل الخصائص.
النطاق هو النموذج.
Scope هو كائن JavaScript له خصائص وطرق يمكن استخدامها في طرق العرض وأجهزة التحكم.
مثيل AngularJS
إذا قمت بتعديل العرض ، فسيتم أيضًا تحديث النموذج ووحدة التحكم وفقًا لذلك:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <input ng-model = "name"> اسمي {{name}} </div> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.name = " القيمة في مربع الإدخال ، وسوف تؤثر على النموذج ، وبالطبع سيؤثر أيضًا على قيمة السمة المقابلة لوحدة التحكم. </p> </body> </html>نتائج التشغيل:
اسمي جون دو
عندما تقوم بتعديل القيمة في مربع الإدخال ، فإنه سيؤثر على النموذج وبالطبع سيؤثر أيضًا على قيمة السمة المقابلة لوحدة التحكم.
نطاق النطاق
من المهم جدًا معرفة النطاق الذي تستخدمه حاليًا.
في حالتين أعلاه ، هناك نطاق نطاق واحد فقط ، لذلك من السهل نسبيًا معالجته. ومع ذلك ، في المشاريع الكبيرة ، هناك نطاقات متعددة في HTML DOM. في هذا الوقت ، تحتاج إلى معرفة النطاق المقابل للنطاق الذي تستخدمه.
مثيل AngularJS
عندما نستخدم توجيه NG-Repeat ، تصل كل مكررة إلى الكائن المكرر الحالي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <ul> <li ng-repeat = "x in names"> {{x}} </li> "Linus"] ؛}) ؛ </script> </body> </html>نتائج التشغيل:
يمكن لكل عنصر <li> الوصول إلى كائن مكرر الحالي ، والذي يتوافق مع سلسلة ، ويتم تمثيله بواسطة المتغير x.
نطاق الجذر
تحتوي جميع التطبيقات على Rootscope $ التي يمكن استخدامها في جميع عناصر HTML الموجودة في توجيه NG-APP.
يمكن استخدام $ rootscope في جميع أنحاء التطبيق. إنه جسر النطاق في كل وحدة تحكم. يمكن استخدام القيم المحددة مع Rootscope في كل وحدة تحكم.
مثيل AngularJS
عند إنشاء وحدة تحكم ، تمرير $ rootscope كمعلمة ويمكن استخدامها في التطبيق:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> الاسم الأخير هو {{lastName}} []] </p> </body> </html>نتائج التشغيل:
الاسم الأخير هو عضو في عائلة Refsnes:
لاحظ أن $ rootscope يمكن الوصول إليها داخل وخارج كائن الحلقة.