بالنسبة للتعليمات ، يمكن فهمها ببساطة على أنها وظائف تعمل على عناصر DOM محددة ، ويمكن للتعليمات تمديد وظائف هذا العنصر.
أولاً ، دعنا نلقي نظرة على مثال معلمة كاملة ثم نقدم وظائف واستخدام كل معلمة بالتفصيل:
Angular.Module ('myapp' ، []) .DIRECITION ('myDiRective' ، function () {return {restrict: string ، الأولوية: الرقم ، الطرفية: BOOLEAN ، القالب: السلسلة أو الوظيفة الوظيفة (النطاق ، العنصر ، attrs ، transclude ، oneinjectables) {...} ، controleras: string ، require: string ، link: function (scope ، ielement ، iattrs) {...} ، compile: Post: Function (Scope ، iElement ، IATTRS ، Controller) {...}} function postlink (...) {...}}} ؛تقييد [سلسلة]
تقييد معلمة اختيارية. تستخدم لتحديد في شكل التعليمات التي يتم الإعلان عنها في DOM. القيمة الافتراضية هي ، أي ، يتم إعلانها في شكل سمة.
القيم الاختيارية هي كما يلي:
ه (عنصر)
<my-directive> </sirective>
(خاصية ، القيمة الافتراضية)
<div my-directive = "expression"> </viv>
ج (اسم الفصل)
<viv> </viv>
م (ملاحظة)
<-التوجيه: التعبير الخاص بي->
بشكل عام ، بالنظر إلى توافق المتصفح ، يوصى بشدة بإعلان السمات الافتراضية فورًا في شكل سمات. ينصح الطريقة الأخيرة بعدم استخدام فهرس التأهيل عندما لا يكون مطلوبًا.
شفرة:
Angular.Module ('app' ، []) .DIRECIVE ('myDiRevective' ، function () {return {rody: 'e' ، template: '<a href = "http://www.baidu.com"> baidu </a>'} ؛تأثير:
الأولوية [int]
تتجاهل معظم التعليمات هذه المعلمة واستخدم القيمة الافتراضية 0 ، ولكن بعض السيناريوهات مهمة للغاية أو ضرورية لتعيين أولوية عالية. على سبيل المثال ، يقوم Ngrepeat بتعيين هذه المعلمة على 1000 ، بحيث يمكن أن تضمن أنه في نفس العنصر يتم استدعاؤه دائمًا قبل التعليمات الأخرى.
المحطة [Bool]
يتم استخدام هذه المعلمة لإيقاف تشغيل التعليمات على العنصر الحالي الذي يكون له أولوية أقل من هذه التعليمات. ومع ذلك ، ستظل تعليمات ذات نفس الأولوية التي يتم بها تنفيذ التعليمات الحالية.
على سبيل المثال: NGIF له أولوية أعلى قليلاً من NGVIEW (فهي في الواقع معلمات طرفية). إذا كانت قيمة التعبير لـ NGIF صحيحة ، فيمكن تنفيذ NGVIEW بشكل طبيعي ، ولكن إذا كانت قيمة تعبير NGIF خاطئة ، فلن يتم تنفيذ NGVIEW لأن أولوية NGVIEW منخفضة.
قالب [سلسلة أو وظيفة]
معلمة القالب اختيارية ويجب ضبطها على أحد النموذجين التاليين:
قطعة من نص HTML.
وظيفة يمكن أن تقبل معلمتين ، والمعلمات هي Telement و Tattrs ، وإرجاع سلسلة تمثل القالب. T في Telement و Tattrs يرمز إلى القالب ، نسبة إلى المثال.
أولاً ، دعنا نوضح الاستخدام الثاني:
Angular.Module ('app' ، []) .DIRECIVER ('myDiRevective' ، function () {return {rody: 'eac' ، template: function (elem ، attr) {return "<a href = '" + attr.value + "'>" + attr.text + "</a>" ؛htmlcode: (التأثير هو نفسه كما هو مذكور أعلاه ، لن يتم عرض أي مظاهرة)
<my-directive value = "http://www.baidu.com" text = "baidu"> </my-diRective> <div my-directive value = "http://www.baidu.com" text = "baidu"> </viv>
TEMPLATEURL [سلسلة أو وظيفة]
TEMPLATEURL هي معلمة اختيارية ، والتي يمكن أن تكون من النوع التالي:
سلسلة تمثل مسار ملف HTML خارجي ؛
وظيفة يمكن أن تقبل معلمتين ، والمعلمات هي Telement و Tattrs ، وإرجاع سلسلة مع مسار ملف HTML الخارجي.
في كلتا الحالتين ، سيتم تمرير عنوان URL للقالب من خلال طبقة الأمان المدمجة في NG ، وخاصة $ getTrustedResourceurl ، والتي تحمي القالب من تحميل مصادر غير موثوق بها. افتراضيًا ، عند الاتصال بالتوجيه ، سيتم طلب ملف قالب HTML من خلال AJAX في الخلفية. إن تحميل أعداد كبيرة من القوالب سيؤدي إلى إبطاء تطبيق العميل بشكل كبير. لتجنب الكمون ، يمكن تخزين قوالب HTML قبل نشر الطلب.
شفرة:
Angular.Module ('app' ، []) .directive ('mydirective' ، function () {return {rody: 'aec' ، templateurl: function (elem ، attr) {return attr.value + ".html" ؛استبدال [Bool]
استبدال معلمة اختيارية. إذا تم تعيين هذه المعلمة ، فيجب أن تكون القيمة صحيحة لأن القيمة الافتراضية خاطئة. تعني القيمة الافتراضية أنه سيتم إدراج القالب في العنصر الذي يطلق هذا التوجيه كعنصر طفل.
على سبيل المثال ، ضمن القيمة الافتراضية للمثال أعلاه ، يكون رمز HTML الذي تم إنشاؤه كما يلي:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </my-directive>
إذا تم استبدال = تم تعيين TRUE
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
وفقًا لملاحظتي ، سيظهر هذا التأثير التأثير الفعلي فقط عند تقييد = "E".
بعد إدخال معلمات التعليمات الأساسية ، تشارك معلمات النطاق الأكثر أهمية ...
معلمة النطاق [منطقي أو كائن]
المعلمة النطاق اختيارية ويمكن ضبطها على صواب أو كائن. القيمة الافتراضية خاطئة.
إذا استخدمت توجيهات متعددة على نطاق العنصر نطاق العزلة ، يمكن أن يصدر أحدها فقط. يمكن فقط لعنصر الجذر في القالب التوجيهي الحصول على نطاق جديد. لذلك ، يتم تعيين النطاق على صحيح بشكل افتراضي لهذه الكائنات. تتمثل وظيفة توجيه NG-Controller المدمج في أن ترث من نطاق الوالدين وإنشاء نطاق جديد للطفل. يخلق نطاق طفل جديد ورث من نطاق الوالدين. لن يتم وصف الميراث هنا بالتفصيل ، وهو في الأساس مثل الميراث الموجهة نحو الكائن.
أولاً ، دعنا نحلل قطعة من الكود:
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div ng-init = "name = 'الأب'"> الجيل الأول: {{name}} <div ng-init = "name = 'son'" "ng-controller =" somecontroller "> {{{}}}} الاسم}} </div> </viv> </viv> </viv> </viv> </viv>لقد وجدنا أن الجيل الأول ، نهيئة الاسم كأب ، لكن الجيل الثاني والجيل الثالث هو في الواقع نفس النطاق ، وبالتالي فإن اسمه هو في الواقع كائن ، وبالتالي فإن تأثير ذلك هو كما يلي:
الجيل الأول: الأب
الجيل الثاني: حفيد
الجيل الثالث: حفيد
نقوم بتعديل الرمز لعزل الجيل الثالث ثم تحقق من التأثير:
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div ng-init = "name = 'الأب'"> الجيل الأول: {{name}} <div ng-init = "name = 'son' ng-controller = "SecondController"> الجيل الثالث: {{name}} </div> </viv> </viv> </viv> </viv> </viv> angular.module ('app' ، []) .Controller ('somecontroller' ، function ($ scope) {}) .Controller ('SecondController' ، function ($ scope) {})الآثار هي كما يلي:
الجيل الأول: الأب
الجيل الثاني: الابن
الجيل الثالث: حفيد
بعد تعديل الكود ، دعونا نلقي نظرة على الميراث:
<div ng-app = "app" ng-init = "name = 'grandfather'"> <viv> الجيل الأول: {{name}} <div ng-controller = "somecontroller"> الجيل الثاني: {{name}} <div ng-controller = "SecondController"> </viv> </viv>الآثار هي كما يلي:
الجيل الأول: قبلة الجد
الجيل الثاني: قبلة الجد
الجيل الثالث: قبلة الجد
إذا كنت ترغب في إنشاء توجيه يمكن أن يرث النطاق من النموذج الأولي الخارجي وتعيين خاصية النطاق إلى صواب ، فهي مجرد عزلة وراثي ، أي أنها لا يمكن أن تؤثر بشكل عكسي على نطاق الوالدين.
دعونا نلقي نظرة على مثال آخر:
Angular.Module ('myapp' ، []) .Controller ('mainController' ، function ($ scope) {}) .Directive ('myDiRevtic' ، function () {return {restrict: 'a' ، scop ng-model = "myProperty"/> </viv> '} ؛رمز HTML:
<div ng-controller = 'mainController' ng-init = "myProperty = 'hello world!'"
عندما نغير قيمة النطاق التي سنجدها
كاذبة: ورث ولكن لا عزل
صحيح: الوراثة والعزل
{}: معزول وغير ورث
transclude
Transclude هي معلمة اختيارية. القيمة الافتراضية خاطئة. غالبًا ما يتم استخدام التضمين لإنشاء مكونات قابلة لإعادة الاستخدام ، وهو مثال نموذجي هو مربع حوار مشروط أو شريط تنقل. يمكننا تمرير جميع القالب بأكمله ، بما في ذلك التعليمات الموجودة فيه ، إلى تعليمات واحدة عن طريق تضمينه. يمكن للداخل من التوجيه الوصول إلى نطاق التوجيه الخارجي ، ويمكن للقالب أيضًا الوصول إلى كائنات النطاق الخارجي. من أجل تمرير النطاق ، يجب ضبط قيمة المعلمة النطاق لعزل النطاق بواسطة {} أو صحيح. إذا لم يتم تعيين معلمة النطاق ، فسيتم ضبط النطاق داخل التوجيه على نطاق القالب الوارد.
استخدم Transclude: صحيح فقط إذا كنت ترغب في إنشاء توجيه يمكن أن يحتوي على أي محتوى.
دعونا نلقي نظرة على مثالين - شريط التنقل:
<div side-box> <viv> <a href = ""> graphics </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = "" "> الواجهة الأمامية </a> <a href =" "
JSCODE:
Angular.Module ('myapp' ، []) .directive ('sidebox' ، function () {return {rody: 'ea' ، scope: {title: '@'} ، translate: true ، template: '<viv> <div> <h2>' + '{{etit}} </h2> <span ng-transcl }) ؛يخبر هذا الرمز برنامج التحويل البرمجي NG بوضع ما يحصل عليه من عنصر DOM حيث يكتشف توجيه NG-Transclude.
دعونا نلقي نظرة على مثال من الموقع الرسمي:
Angular.Module ('docsisofnbindexample' ، []) .Controller ('Controller' ، ['$ scope' ، '$ timeout' ، function ($ scope ، $ timeout) {$ scope.name = 'toBias' ؛ $ scope false} ، 2000) ؛my-dialog-colose.html
my-dialog-close.html <viv> <a href ng-click = "close ()"> × </a> <div ng-transclude> </viv> </viv>
index.html
<div ng-controller = "controller"> <-dialog ng-hide = "dialogishidden" on-close = "hidedialog ()"> تحقق من المحتويات ، {{name}}! </my-dialog> </viv>إذا كانت التعليمات تستخدم المعلمة transclude ، فلا يمكن لوحدة التحكم مراقبة التغييرات في نموذج البيانات بشكل طبيعي. يوصى باستخدام خدمة watch $ في وظيفة الارتباط.
وحدة التحكم [سلسلة أو وظيفة]
يمكن أن تكون معلمة وحدة التحكم سلسلة أو دالة. عند التعيين على سلسلة ، سيتم العثور على مُنشئ وحدة التحكم المسجلة في التطبيق بقيمة السلسلة كاسم.
Angular.Module ('myapp' ، []) .DIRECITION ('myDirective' ، function () {rodiRct: 'a' ، controller: 'somecontroller'})يمكن تعريف وحدة التحكم المضمنة من خلال مُنشئ مجهول داخل التعليمات.
angular.module ('myapp' ، []) .DIRECITION ('myDiRevice' ، function () {rodit: 'a' ، controller: function ($ scope ، $ element ، $ attrs ، $ transclude) {// يتم وضع منطق وحدة التحكم هنا}}) ؛يمكننا حقن أي خدمة NG التي يمكن حقنها في وحدة التحكم ويمكننا استخدامها في التعليمات. هناك أيضًا بعض الخدمات الخاصة في وحدة التحكم التي يمكن حقنها في التعليمات. وتشمل هذه الخدمات:
1
النطاق الحالي المرتبط بعنصر التوجيه.
2. عنصر $
العنصر المقابل للتعليمات الحالية.
3. $ attrs
كائن يتكون من سمات العنصر الحالي.
<div id = "adiv" class = "box"> </viv> لديه كائن السمة التالي: {id: "adiv" ، class: "box"}4. $ transclude
سيتم ربط وظيفة ارتباط التضمين بنطاق التضمين المقابل. وظيفة Link Transclude هي وظيفة يتم تنفيذها فعليًا لاستنساخ عناصر وتشغيل DOM.
Angular.Module ('myapp' ، []) .directive ('myLink' ، function () {return {restrict: 'ea' ، transclude: true ، controller: function ($ scope ، $ element ، $ attrs ، $ transclude) {$ transclude (function) {var a = angular.element ('<a>) ؛ A.Text (text () ؛ }) ؛؛HTML
<my-link value = "http://www.baidu.com"> baidu </y-link>
<div my-link value = "http://www.google.com"> Google </iv>
يوصى باستخدام transcludefn فقط في معلمات الترجمة. يمكن لدالة الارتباط عزل الإرشادات عن بعضها البعض ، بينما تحدد وحدة التحكم السلوك القابل لإعادة الاستخدام. إذا أردنا فضح واجهة برمجة التطبيقات للتعليمات الحالية للتعليمات الأخرى ، فيمكننا استخدام معلمة وحدة التحكم ، وإلا يمكننا استخدام الارتباط لإنشاء وظيفة عنصر التعليمات الحالي (أي الوظائف الداخلية). إذا استخدمنا النطاق. $ watch () أو نريد التفاعل مع عناصر DOM في الوقت الحقيقي ، فإن استخدام الروابط سيكون خيارًا أفضل. مع التضمين ، قد يختلف النطاق الذي ينعكس من النطاق في وحدة التحكم عما توقعناه. في هذه الحالة ، لا يمكن ضمان تحديث كائن نطاق $ بشكل طبيعي. عندما تريد التفاعل مع النطاق على الشاشة الحالية ، يمكنك استخدام معلمة SCOPE التي تم تمريرها في وظيفة الارتباط.
وحدة التحكم [سلسلة]
يتم استخدام معلمة Controleras لتعيين الاسم المستعار لوحدة التحكم بحيث يمكن الرجوع إلى وحدة التحكم في العرض دون حقن نطاق $.
<div ng-controller = "mainController as main"> <input type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </viv>JSCODE:
Angular.Module ('myapp' ، []) .Controller ('mainController' ، function () {this.name = "halower" ؛}) ؛يتيح الاسم المستعار لوحدة التحكم التوجيه والتعليمات لإنشاء وحدات تحكم مجهولة. يمكن لهذه القدرة إنشاء كائنات ديناميكية في وحدات التحكم ، ويكون الكائن معزولًا وسهل الاختبار.
تتطلب [سلسلة أو سلسلة []]
المتطلبات هي سلسلة تمثل اسم تعليمات أخرى. سوف تتطلب ضخ وحدة التحكم في التعليمات التي تحددها وتعمل كمعلمة رابعة لوظيفة الارتباط للتعليمات الحالية. قيمة السلسلة أو عنصر الصفيف هي اسم التعليمات التي سيتم استخدامها في نطاق التعليمات الحالية. في أي حال ، سيشير برنامج التحويل البرمجي NG إلى قالب التعليمات الحالية عند البحث عن تحكم فرعي.
ترجمة 【كائن أو وظيفة】
لا يتم استخدام خيار التجميع نفسه بشكل متكرر ، ولكن يتم استخدام وظيفة الارتباط بشكل متكرر. بشكل أساسي ، عندما نقوم بتعيين خيار الارتباط ، نقوم بالفعل بإنشاء وظيفة ارتباط postlink () بحيث يمكن أن تحدد وظيفة compile () وظيفة الارتباط. عادة ، إذا تم تعيين وظيفة الترجم ، فهذا يعني أننا نريد إجراء عمليات DOM قبل وضع التعليمات والبيانات في الوقت الفعلي في DOM. من الآمن إجراء عمليات DOM مثل إضافة وحذف العقد في هذه الوظيفة.
خيارات التجميع والارتباط حصرية بشكل متبادل. إذا تم تعيين هذين الخيارين في نفس الوقت ، فسيتم اعتبار الوظيفة التي يتم إرجاعها بواسطة التجميع وظيفة ارتباط ، وسيتم تجاهل خيار الارتباط نفسه.
الوظيفة المترجمة هي المسؤولة عن تحويل القالب DOM. وظيفة الارتباط مسؤولة عن ربط النطاق و DOM. يمكن تشغيل DOM يدويًا قبل ربط النطاق بـ DOM. في الممارسة العملية ، يكون هذا النوع من التشغيل نادرًا جدًا عند كتابة تعليمات مخصصة ، ولكن هناك العديد من الإرشادات المدمجة التي توفر هذه الوظائف.
وصلة
compile: function (tele ، tattrs ، translatefn) {// todo: function function (scope ، ele ، attrs) {// link function} ؛وظيفة الارتباط اختيارية. إذا تم تعريف وظيفة تم تجميعها ، فإنها تُرجع الوظيفة المرتبطة ، لذلك عندما يتم تعريف كلتا الوظيفتين ، فإن الدالة المترجمة تعمل على زيادة الدالة المرتبطة. إذا كانت تعليماتنا بسيطة ولا تتطلب إعدادات إضافية ، فيمكننا إرجاع وظيفة من وظيفة المصنع (وظيفة رد الاتصال) لاستبدال الكائن. إذا تم ذلك ، فإن هذه الوظيفة هي وظيفة الارتباط.
ngmodel
يوفر واجهة برمجة تطبيقات أكثر كامنة لمعالجة البيانات في وحدة التحكم. يتم استخدام واجهة برمجة التطبيقات هذه للتعامل مع ربط البيانات والتحقق وتحديث CSS وغيرها من الأشياء التي لا تعمل بالفعل على DOM. سيتم حقن وحدة تحكم NGMODEL في التعليمات جنبا إلى جنب مع NGMODEL ، والتي تحتوي على بعض الطرق. من أجل الوصول إلى NGMODELCONTROLLER ، يجب عليك استخدام إعدادات المتطلبات.
العناصر الشائعة التي تستخدمها NGMODELCONTROLLER هي كما يلي:
1. من أجل تعيين قيمة العرض في النطاق ، يجب استدعاء وظيفة ngmodel. $ setViewValue ().
طريقة $ setViewValue () مناسبة للاستماع إلى الأحداث المخصصة في التوجيهات المخصصة (مثل استخدام مكون إضافي jQuery مع وظائف رد الاتصال) ، ونود تعيين $ viewvalue وتنفيذ حلقات Digest عند استدعاء رد الاتصال.
Angular.Module ('myapp') .directive ('myDiRevective' ، function () {return {require: '؟ ngmodel' ، link: function (scope ، ele ، attrs ، ngmodel) {if callback (! النطاق. }} ؛ }) ؛ }} ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛ } ؛ }) ؛2. يمكن أن تحدد طريقة عرض $ طريقة العرض المحددة للعرض
3
1. $ viewValue
تحتوي خاصية ViewValue $ على السلسلة الفعلية المطلوبة لتحديث العرض.
2. $ ModelValue
يتم الاحتفاظ بـ $ ModelValue بواسطة نموذج البيانات. قد تكون $ ModelValue و $ ViewValue مختلفة اعتمادًا على ما إذا كان خط أنابيب $ arser يعمل عليه.
3. $ parsers
قيمة محلات $ هي مجموعة من الوظائف ، حيث تسمى الوظائف واحدة تلو الأخرى في شكل خطوط أنابيب. NGMODEL يتم تمرير القيمة من DOM إلى الوظيفة في محلات $ ويتم معالجتها من قبل المحلل المحلل بالتسلسل.
4. $ formatters
قيمة التنسيقات $ هي مجموعة من الوظائف التي تسمى واحدة تلو الأخرى في شكل خط أنابيب عندما تتغير قيمة نموذج البيانات. ليس له أي تأثير على خط أنابيب $ arser ويستخدم لتنسيق القيم وتحويلها لعرضها في عناصر تحكم مع هذه القيمة ملزمة.
5. $ ViewChangelisteners
قيمة $ viewChangelisteners هي مجموعة من الوظائف التي تسمى واحدة تلو الأخرى في شكل خط أنابيب عندما تتغير القيمة في العرض. مع $ ViewChangelisteners ، يمكن تحقيق سلوك مماثل دون استخدام ساعة $. منذ تجاهل قيمة الإرجاع ، لا تحتاج هذه الوظائف إلى إرجاع القيم.
6. خطأ $
يحتفظ كائن خطأ $ باسم المدقق الذي لم يمر بالتحقق ومعلومات الخطأ المقابلة.
7. $ البكر
قيمة البكر $ هي منطقية ، والتي يمكن أن تخبرنا ما إذا كان المستخدم قد قام بتعديل عنصر التحكم.
8. $ القذرة
إن قيمة $ Dirty هي عكس البكر $ ، والتي يمكن أن تخبرنا ما إذا كان المستخدم قد تفاعل مع عنصر التحكم.
9. $ صالح
تخبرنا القيمة الصالحة $ ما إذا كانت هناك أخطاء في عنصر التحكم الحالي. القيمة خاطئة عندما يكون هناك خطأ ، والقيمة صحيحة عندما لا يكون هناك خطأ.
10. $ غير صالح
تخبرنا القيمة غير الصالحة $ ما إذا كان هناك خطأ واحد على الأقل في عنصر التحكم الحالي ، وقيمتها هي عكس $ صالحة.
ما سبق هو تجميع التعليمات ومواد المعرفة حول AngularJS. سوف نستمر في إضافتها لاحقًا. شكرا لك على دعمك لهذا الموقع!