إنشاء وحدة التحكم
يتم استخدام وحدة تحكم AngularJS في كل مكان ، ويكون عرض الكود بسيطًا نسبيًا.
<! doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "examplep"> <head> <meta http-equiv = "content-type" content = "text/html ؛ src = "Angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet" /> <link href = "bootstrap.css {$ scope.setinput = function (value) {console.log ("print: ng-click = "setInput (value)"> انقر فوق </button> </viv> </body> </html>السيطرة بسيطة جدا. أولاً ، أضفت سمة NG-APP إلى HTML للإشارة إلى نطاق الوحدة النمطية.
تمت إضافة NG-Controller إلى الجسم لتمثيل نطاق وحدة تحكم DefaultCtrl.
أمر ng-model في ملاحظة الإدخال هو بيانات الربط ، وربط البيانات ثنائية الاتجاه (MVVM).
نطاق $ هو النطاق المدمج في AngularJS.
هذا المثال هو مجرد طباعة قيمة الإدخال إلى وحدة التحكم ، كما هو موضح في الشكل:
هذا كل شيء ، الأمر بسيط.
قضايا نطاق وحدة تحكم متعددة
الآن دعنا نعدل البرنامج.
<Body> <div ng-controller = "defaultCtrl"> <h> العد </h> <viv> <الإدخال المطلوب ng-model = "value"/> <button ng click = "setInput (value) /> <button ng click = "setInput (value)"> انقر فوق </button> </viv> </body>
يظل بقية الكود دون تغيير ، لقد وضعت فقط الممتلكات التي تسيطر عليها NG في الجسم في اثنين من divs. لقد أعادت استخدام وحدة تحكم DefaultCtrl. أظن أنه إذا قمت بإدخال المحتوى في علامة الإدخال الأولى ونقر فوق الزر زر وحدة التحكم الثانية ، فهل ستظهر النتيجة التي تتوقعها؟
هل النتيجة هي نفسها ما رأيك فيك؟ يمكنك أن ترى أن النتيجة غير محددة. في شرح جيد ، يجب أن يكون نطاقها مختلفًا. على الرغم من أنك أعادت استخدام وحدة التحكم الموحدة ، إلا أن النطاق يختلف بالفعل عند إنشائه.
سوف تسمى وظيفة المصنع نطاقات مختلفة.
إذن كيف يمكن الوصول بين نطاقات مختلفة؟ في AngularJS ، هناك $ rootscope للوصول إلى النطاق.
فيما يلي ثلاث وظائف لتقديمها.
$ on (name ، Handler) قم بتسجيل وظيفة معالج الأحداث التي سيتم استدعاؤها عند استلام حدث محدد بواسطة النطاق الحالي.
$ emit (الاسم ، args) يرسل حدثًا إلى نطاق الوالد الحالي حتى نطاق الجذر.
يرسل البث $ (الاسم ، args) حدثًا إلى subcope ضمن النطاق الحالي ، المعلمة هي اسم الحدث وكائن يستخدم لتوفير بيانات إضافية للحدث.
الآن قم بتغيير الكود التالي:
<script> Angular.module ("exampleapp" ، []). Controller ("DefaultCtrl" ، Function ($ scope ، $ rootscope) {$ scope. $ on ("updateValue" ، function (event ، args) {$ scop.input = args.zip ؛ {zip: value}) ؛ console.log ("print:" + $ scope.input) ؛} $ scope.copy = function () {console.log ("copy:" + $ scope.input) ؛} ؛} ؛ /> <button ng click = "copy ()"> copy </utton> </viv> </viv>في رمز القطاع ، أضفت عدة وظائف وغيرت وظائف وحدة التحكم الثانية في نفس الوقت.
نتيجة:
لقد حدث.
الميراث تحكم
<script> Angular.module ("exampleapp" ، []). Controller ("DefaultCtrl" ، function ($ scope ، $ rootscope) {//$سيبون. {//$trotscope.unedBroadccast("updatevalue "، {zip: value}) ؛ $ scope.input = value ؛ console.log (" print: " + $ scope.input) ؛} $ scope.copy = function () {console.log (" copy: " + $ scope.input) ؛} ؛}). ($ scope) {$ scope.copy = function () {console.log ("copy:" + $ scope.input) ؛} ؛}) ؛ </script> <body ng-controller = "defaultCtrl"> <viv> count </h> ng-click = "setInput (value)"> انقر فوق </button> </viv> <viv> <div ng-controller = "simplectrl"> <h> count </h> <viv> <input ng-model = "value"/> <button ng-click = "copy ()"لقد أضفت وحدة تحكم ، وبعد مراقبة دقيقة لـ Simplectrl ، وجدت أن DefaultCtrl يحتوي على Simplectrl ، وبالتالي فإن الوظيفة البسيطة.
النتائج: عندما نشرت الإدخال في النافذة الأولى ، تغيرت الثانية أيضًا ، ويجب أن تكون نفس القيمة.
مشكلة نطاق $ ، يجب أن تفهم نطاقها عند استخدام وحدة التحكم.