يستخدم هذا البرنامج التعليمي إصدار AngularJS: 1.5.3
AngularJS Github: https://github.com/angular/angular.js/
AngularJS عنوان التنزيل: https://angularjs.org/
الخلاصة: التوجيه (التعليمات) يعتقد المؤلف أنها واحدة من الوظائف القوية والمفيدة للغاية لـ AngularJ. إنها تعادل كتابة سمة عنصر دوم أو سمة فئة مخصصة أو سمة فئة بالنسبة لنا ، ولا يمكنك أيضًا معالجة النطاق ، وربط الأحداث ، وأنماط التغيير ، وما إلى ذلك. من خلال هذا التوجيه ، يمكننا تغليف العديد من الإرشادات العامة ، مثل تعليمات الترحيل ، وتعليمات الإكمال التلقائي ، وما إلى ذلك ، ثم تحتاج فقط إلى كتابة سطر واحد من التعليمات البرمجية في صفحة HTML لتحقيق العديد من الوظائف القوية. بشكل عام ، يجب استخدام التوجيه للحصول على السيناريوهات التالية:
1. اجعل HTML أكثر دلالية ولا تحتاج إلى دراسة الكود والمنطق في العمق لمعرفة المنطق العام للصفحة.
2. ملخص مكون مخصص وإعادة استخدامه في مكان آخر.
1. تعريف التوجيه وطريقة استخدامه
تعريف توجيه AngularJS تقريبًا على النحو التالي
angular.module ("app" ، []). التوجيه ("DIREVIVERAME" ، Function () {return {// define by Setting heads} ؛})يمكن وضع التوجيه بأسماء العناصر والسمات والفصول والتعليقات. فيما يلي الطريقة المكافئة للاقتباس Mydir ، التوجيه. (لكن العديد من التوجيهات تقتصر على استخدام "الخصائص")
<span <span style = "font-family: arial ، helvetica ، sans-serif ؛"> اسم التوجيه </span> <span style = "font-family: arial ، helvetica ، sans-serif ؛ sans-serif ؛ "> اسم التوجيه </span >> </<span style =" font-family: arial ، helvetica ، sans-serif ؛ "> اسم التوجيه </span >> </<span style style =" font-family: arial ، Helvetica ، sans-serif ؛ sans-serif ؛ "> اسم التوجيه </span >> // العنصر <!-التوجيه: <span style =" font-family: arial ، helvetica ، sans-serif ؛ "> اسم التوجيه </span> <span style =" font-family: arial ، helvetica ، sans-serif ؛ "
المثال التالي:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min <hy hello-world> </hys-world> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.directive ('HelloWorld' ، function () {return {restrict: 'e' ، template: '<viv> hi am lin bingwen ~~~ </viv>' ، استبدال: true} ؛}) ؛ </script> </html>نتيجة:
فيما يلي نسخة مفصلة توجيهية
var mymodule = Angular.Module (...) ؛ mymodule.directive ('Direcivename' ، Function Factory (enjectables) {var direciedefinitionObject = {priority: 0 ، template: '<viv> </viv>' ، templateUrl: 'Directive.html' ، applain: false ، transclude: false ، "a '، scope: fult: fumpile (talment ، Pre: Prelink (Scope ، IELEMENT ، IATTRS ، Controller) {...2. تفسير محتوى أمر التوجيه
يمكنك أن ترى أنه يحتوي على 8 محتويات
1. التأكيد
(سلسلة) تشير المعلمات الاختيارية إلى شكل التعليمات التي يتم الإعلان عنها في DOM ؛ القيم هي: E (العنصر) ، A (السمة) ، C (الفئة) ، M (تدوين) ، والقيمة الافتراضية هي أ ؛ بالطبع ، يمكن أيضًا استخدام اثنين معًا ، مثل EA. يمكن أن يكون التمثيل إما عنصر أو سمة.
[HTML] عرض شظايا رمز عرض النسخ العادي على الكود المشتق إلى جزء الكود الخاص بي
e (العنصر): <direcivename> </idevivename>
A (الخاصية): <div DIREVIVERAME = 'Expression'> </viv>
C (الفصل): <div class = 'direcivename'> </div>
M (ملاحظة): <-التوجيه: تعبير Direcivename->
بشكل عام ، يتم استخدام E/A/C بشكل متكرر.
2. -PRIORITY
(رقم) ، معلمات اختيارية ، حدد أولوية التعليمات. إذا كانت هناك تعليمات متعددة على DOM واحد ، فسيتم تنفيذ الأولوية الأعلى أولاً ؛
3. الطرفية
(Boolean) ، المعلمة الاختيارية ، يمكن ضبطها على صواب أو خطأ. إذا تم تعيينه على صواب ، فستكون الإرشادات الأخرى ذات أولوية أقل من هذه التعليمات غير صالحة ولن يتم استدعاؤها (سيتم تنفيذ تلك ذات الأولوية نفسها)
4.Template (سلسلة أو وظيفة) معلمات اختيارية ، والتي يمكن أن تكون:
(1) قطعة من نص HTML
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min <hy hello-world> </hys-world> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.directive ('HelloWorld' ، function () {return {restrict: 'e' ، template: '<viv> <h1> hi am lin bingwen ~~~ </h1> </viv>' ، استبدال: true} ؛}) ؛ </script> </html>(2) يمكن للدالة قبول معلمتين
عندما يشير Telement إلى العنصر الذي يستخدم هذا التوجيه ، و Tattrs هي سمة المثيل ، وهي مجموعة (كائن) تتكون من جميع السمات على العنصر ، مثل:
<hello-world2 title = 'أنا التوجيه الثاني'> </hello-world2>
العنوان هو السمة على الوشم
دعونا نرى ما يحدث عندما يكون القالب وظيفة
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min <hy hello-world> </hy hello-world> <hello-world2 title = 'أنا التوجيه الثاني'> </hello-world2> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.directive ('HelloWorld' ، function () {return {restrict: 'e' ، template: '<viv> <h1> hi am lin bingwen ~~~ </h1> </viv>' ، استبدال: true} ؛}) ؛ app.directive ("helloWorld2" ، function () {return {rody: 'eac' ، template: function (telement ، tattrs) {var _html = '' ؛ </script> </html>نتيجة:
يمكنك أن ترى أن حقل العنوان في العلامة في Hello-World2 يستخدم أيضًا في التوجيه.
5.TemplateUrl (سلسلة أو وظيفة) ، المعلمة الاختيارية ، يمكن أن تكون
(1) سلسلة تمثل مسار ملف HTML
(2) يمكن للدالة قبول معلمتين عن بعد و tattrs (تقريبا نفس الشيء أعلاه)
ملاحظة: أثناء التطوير المحلي ، تحتاج إلى تشغيل خادم ، وإلا فإن استخدام TemplateUrl سيؤدي إلى خطأ في طلب طلب Origin (CORS). منذ تحميل قوالب HTML بشكل غير متزامن ، فإن تحميل عدد كبير من القوالب سيؤدي إلى إبطاء الموقع. هذه خدعة ، وهي تخزين القالب أولاً
يمكنك تحميل صفحة الفهرس الخاصة بك وتضمين الرمز التالي كجزء من صفحتك.
<script type = 'text/ng-template' id = 'hello.html'> <viv> <h1> hi am lin bingwen ~~~ </h1> </viv> </script>
تم تعيين سمة المعرف هنا على TemplateUrl.
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min <hy hello-world> </hys-world> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.directive ('helloWorld' ، function () {return {rodit: 'e' ، templateurl: 'hello.html' ، replace: true} ؛}) ؛ </script> <script type = 'text/ng-template' id = 'hello.html'> <viv> <h1> hi i am lin bingwen ~~~ </h1> </viv> </script> </html>نتيجة الإخراج:
هناك طريقة أخرى لتذاكر ذاكرة التخزين المؤقت هي:
app.run (["$ templatecache" ، function ($ templatecache) {$ templatecache.put ("hello.html" ، "<viv> <h1> hi I am lin bingwen ~~~ </h1> </viv>") ؛}]) ؛أمثلة الاستخدام هي كما يلي:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min <hy hello-world> </hys-world> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.directive ('helloWorld' ، function () {return {rodit: 'e' ، templateurl: 'hello.html' ، replace: true} ؛}) ؛ app.run (["$ templatecache" ، function ($ templatecache) {$ templatecache.put ("hello.html" ، "<viv> <h1> hi I am lin bingwen ~~~ </h1> </viv>") ؛}]) ؛ </script> </html>نتيجة:
في الواقع ، الطريقة الأولى أفضل ، سيكون من الأسرع الكتابة. يحتوي المؤلف على أكثر الطرق والأول للكتابة ، والتي يتم تضمينها مباشرة في SCPRIT.
6. الاستراحة
(القيمة المنطقية) ، القيمة الافتراضية خاطئة. عندما يتم ضبطه على صحيح ، دعنا نلقي نظرة على المثال التالي (قارن الأمثلة الواردة في القالب)
عندما يكون الاستبدال صحيحًا ، لم يعد هناك علامة Hello-World هناك ، وإلا ، فهي موجودة.
7.scope
(1) القيمة الافتراضية خاطئة. يشير إلى ميراث نطاق الوالدين ؛
(2) صحيح. يشير إلى ورث نطاق الوالدين وخلق نطاقك الخاص (نطاق الطفل) ؛
(3) {}. يشير إلى إنشاء نطاق عزل جديد تمامًا ؛
7.1 أولاً ، دعونا نفهم آلية ميراث النطاق. دعنا نستخدم الأمر NG-Controller كمثال.
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = ./ 1.5.3/angular.min ng-controller = 'mainController'> الأب: {{name}} <input ng-model = "name"/> <div my-directive> </viv> </viv> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ App.Controller ('MainController' ، function ($ scope) {$ scope.name = 'lin bingwen' ؛}) ؛ app.directive ('myDiRective' ، function () {return {report: 'ea' ، scope: false ، template: '<viv> son: {{name}} <input ng-model = "name"/> </viv>'} ؛}) ؛ </script> </html>بعد ذلك ، نستخدم مثالًا بسيطًا وواضحًا لتوضيح الاختلافات في قيم النطاق:
النطاق: خطأ
النطاق: صحيح
نِطَاق:{}
عندما يكون خطأ ، يرث الابن قيمة الأب ويغير قيمة الأب ، وتتغير قيمة الابن أيضًا ، والعكس صحيح. (الميراث غير معزول)
عندما يكون صحيحًا ، يرث الابن قيمة الأب ويغير قيمة الأب. تتغير قيمة الابن وفقًا لذلك ، ولكن عندما تتغير قيمة الابن ، تظل قيمة الأب دون تغيير. (الميراث والعزلة)
عندما لا تكون قيمة الأب الموروثة {} ، وبالتالي فإن قيمة الابن فارغة. لا يمكن أن يؤثر تغيير قيمة أي من الطرفين على قيمة الطرف الآخر. (لا يوجد ميراث وعزل)
نصيحة: يعد عزل نطاق الخيار الجيد عندما تريد إنشاء مكون قابل لإعادة الاستخدام. من خلال عزل النطاقات ، نضمن أن تكون التوجيهات "مستقلة" ويمكن إدراجها بسهولة في أي تطبيق HTML ، وهذا النهج يمنع نطاق الوالد من التلوث ؛
7.2 عزل النطاقات يمكنك الوصول إلى خصائص نطاق الوالدين من خلال سياسات الربط.
يوفر التوجيه ثلاث طرق للتفاعل مع أماكن خارج العزلة عند استخدام نطاق العزلة. هؤلاء الثلاثة
@ ربط سمة النطاق المحلي إلى قيمة الخاصية لعقدة DOM الحالية. والنتيجة هي دائمًا سلسلة ، لأن سمة DOM عبارة عن سلسلة.
ويوفر طريقة لتنفيذ تعبير في سياق نطاق الوالدين. إذا لم يتم تحديد اسم ATTR ، فإن اسم السمة هو نفس الاسم المحلي.
= قم بإنشاء ربط ثنائي الاتجاه بين سمة النطاق المحلي واسم سمة النطاق الأصل من خلال قيمة سمة ATTRIVE التوجيهية.
@ سمة النطاق المحلي
@ الطريقة ، يتم استخدام السمات المحلية للوصول إلى قيم السلسلة المحددة بواسطة بيئة خارجية التوجيه ، ويرتبط بشكل رئيسي قيم السلسلة الخارجية من خلال سمة العلامة حيث يوجد التوجيه. هذا الربط هو في اتجاه واحد ، أي التغييرات الملزمة لنطاق الوالد. ستتغير خصائص النطاق في التوجيه بشكل متزامن ، في حين أن التغييرات الملزمة في النطاق معزولة ، ولا يعرف نطاق الوالدين.
المثال التالي: يعلن التوجيه أن نوع النطاق غير معزول ، ويستخدم سمة اسم الربط ، ويستخدم سمة الاسم لربط السمة في نطاق الأصل في التوجيه. عند تغيير قيمة السمة في نطاق الوالدين ، سيقوم التوجيه بتحديث القيمة بشكل متزامن. عند تغيير قيمة الخاصية لقيمة خاصية نطاق التوجيه ، لا يمكن للنطاق الوالد تحديث القيمة بشكل متزامن.
رمز JS:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = ./ 1.5.3/angular.min ng-controller = "myController"> <viv> <viv> نطاق الوالدين: <div> say: {{name}} <br> قم بتغيير اسم النطاق الأصل: <input type = "text" value = "" ng-model = "name"/> </fiv> <div> div> div: <div nameed direated = </viv> <viv> النطاق المعزول (لا تستخدم نطاق الأصل {{name}}): <div named-direction name = "name"> </viv> </viv> </viv> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.controller ("myController" ، الدالة ($ scope) {$ scope.name = "hello world" ؛}). التوجيه ("classedDirective" ، function () {return {scope: {name: "@"} ، template: 'say: ng-model = "name"> '} ؛ </script> </html>النتائج: التأثير الأولي للصفحة
تأثير الرسوم المتحركة:
يمكنك أن ترى أن المحتوى الموجود في نطاق الوالدين قد تغير ، وتغير نطاق الطفل في نفس الوقت. وتغير المحتوى على subscope. لا يؤثر على المحتوى في نطاق الوالدين!
= سمة النطاق المحلي
= قم بإنشاء ربط ثنائي الاتجاه بين سمة النطاق المحلي واسم سمة النطاق الأصل من خلال قيمة سمة ATTRIVE التوجيهية.
بمعنى ، عندما تريد خاصية ملزمة ثنائية الاتجاه ، يمكنك استخدام = لتقديم خصائص خارجية. سواء أكان تغيير نطاق الوالدين أو عزل الخصائص في النطاق ، فإن نطاق الوالدين ونطاق العزل سيقومون بتحديث قيم الممتلكات في نفس الوقت لأنها علاقات ذات اتجاهين.
نموذج الرمز:
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = ./ 1.5.3/angular.min ng-controller = "myController"> <viv> نطاق الأصل: <div> قل: {{user.name}} <br> تغيير اسم النطاق الأصل: <type type = "text" value = "" ng-model = "userbase.name"/> </viv> </body> <script type = "text/javaScript"> var app = Angular.Module ('myapp' ، []) ؛ app.controller ("myController" ، الدالة ($ scope) {$ scope.userbase = {name: 'hello' ، id: 1} ؛}). التوجيه ("arsidateddirective" ، function () {return {scope: {user: "="} ، template: "sale {user.name}} type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>تأثير:
يمكنك أن ترى أن المحتوى الموجود على نطاق الوالدين ونطاق الطفل هو نفسه دائمًا!
& سمات النطاق المحلي
توفر الطريقة وسيلة لتنفيذ تعبير مباشرة في سياق نطاق الوالدين. هذا التعبير يمكن أن يكون وظيفة.
على سبيل المثال ، عندما تكتب توجيهًا ، عندما ينقر المستخدم على زر واحد ، يريد التوجيه إخطار وحدة التحكم ، لا يمكن لوحدة التحكم معرفة ما يحدث في التوجيه. ربما يمكنك القيام بذلك عن طريق استخدام البث الحدث في Angular ، ولكن يجب عليك إضافة طريقة الاستماع للحدث إلى وحدة التحكم.
أفضل طريقة لتمكين التوجيه من تمرير وظيفة في نطاق الوالدين. عندما يكون هناك أي إجراء في التوجيه يجب تحديثه إلى نطاق الوالدين ، يمكن تنفيذ قطعة رمز أو وظيفة في سياق نطاق الوالدين.
ينفذ المثال التالي وظيفة نطاق الوالدين في التوجيه.
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = ./ 1.5.3/angular.min ng-controller = "myController"> <viv> نطاق الأصل: <div> قل: {{value}} </div> </viv> <div> النطاق المعزول: <div action-directive action = "click ()"> <//div> </div> </body> <script type/javascord "> app.controller ("myController" ، الدالة ($ scope) {$ scope.value = "hello world" ؛ $ scope.click = function () {$ scope.value = math.random () ؛} ؛} ؛ value = "تنفيذ طريقة تعريف نطاق الأصل في التوجيه" ng-click = "action ()"/> '}}) </script> </html>تأثير:
هناك العديد من محتويات التعليمات ، دعنا نتحدث عن Transclude و Compline و Link و Controller.
8.transclude
إذا كنت لا تريد استبدال المحتوى الموجود داخل التوجيه بالقالب ، فيمكنك تعيين هذه القيمة على True. بشكل عام ، يجب استخدامه مع توجيه ngtransclude. على سبيل المثال: القالب: "<viv> مرحبًا ، سيتم تضمين كل <div ng-transclude> </viv> </viv>" ، في هذا الوقت ، المحتوى الموجود داخل التعليمات في Div ng-transclude. أي أنه يصبح <div> مرحبًا بكل <viv> هذا هو المحتوى داخل الأمر </div> </viv>. القيمة الافتراضية خاطئة ؛ يتيح لنا خيار التكوين هذا استخراج المحتوى الموجود في عنصر التوجيه ثم وضعه في موضع معين في القالب التوجيهية. عند تمكين Transclude ، يمكنك استخدام NG-Transclude للإشارة إلى مكان وضع المحتوى المترجم
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min الرابط </li> <li> الرابط الثاني </li> </ul> </viv> </body> <script type = "text/javaScript"> var app = Angular.module ('myapp' ، []) ؛ app.directive ('sidebox' ، function () {return {rodit: 'ea' ، scope: {title: '@'} ، Translate: true ، template: '<viv>/ <viv>/ <h2> {{title}} </h2>/ <span ng-transclude>/ </ span>/ <viv> </script> </html>نتيجة:
عندما transclude: خطأ ،
إذا كانت التعليمات تستخدم المعلمة transclude ، فلا يمكن لوحدة التحكم مراقبة التغييرات في نموذج البيانات بشكل طبيعي. يوصى باستخدام خدمة watch $ في وظيفة الارتباط.
9.controller
يمكن أن تكون سلسلة أو وظيفة.
إذا كانت سلسلة ، فاستخدم السلسلة كاسم وحدة التحكم للعثور على مُنشئ وحدة التحكم المسجلة في التطبيق.
Angular.Module ('myapp' ، []) .DIRECITION ('myDiRevective' ، function () {تقييد: 'a' ، // controller: 'somecontroller'}) $ attrs ، $ transclude) {// يتم وضع منطق وحدة التحكم هنا}) ؛ يمكن أيضًا تعريفه على أنه وظائف مجهولة المصدر مباشرة داخل التعليمات ، ويمكننا ضخ أي خدمة هنا (سجل $ ، $ timeout ، إلخ) {// يتم وضع منطق وحدة التحكم هنا}}) ؛هناك أيضًا بعض الخدمات الخاصة (المعلمات) التي يمكن حقنها
(1) نطاق $ ، النطاق المرتبط بالعناصر التوجيهية
(2) عنصر $ ، العنصر المقابل للتعليمات الحالية
(3) $ attrs ، كائن يتكون من سمات العنصر الحالي
(4) $ transclude ، وظيفة الارتباط المدمجة ، تم تنفيذها فعليًا المستخدمة لاستنساخ العناصر وتشغيل DOM
ملاحظة: ما لم يتم استخدامه لتحديد بعض السلوك القابل لإعادة الاستخدام ، لا ينصح به بشكل عام هنا.
يمكن تبادل وظائف وحدة التحكم والارتباط للتعليمات (التي ستتم مناقشتها لاحقًا). الفرق هو أن وحدة التحكم تستخدم بشكل أساسي لتوفير سلوك يمكن إعادة استخدامه بين التعليمات ، ولكن يمكن أن تحدد وظيفة الارتباط السلوك فقط في التعليمات الداخلية الحالية ولا يمكن إعادة استخدامها بين التعليمات.
<! doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> مقدمة إلى AngularJS </title> <script type = "text/javascript" src = "./ 1.5.3/angular.min am lin bingwen ~~~ </hyly> </body> <script type = "text/javaScript"> var app = Angular.module ('myapp' ، []) ؛ app.directive ('hello' ، function () {return {resterct: 'ea' ، transclude: true ، // لاحظ أنه يجب تعيينه على وحدة تحكم حقيقية: function (scope $ ، $ element ، $ attrs ، $ transclud $ attroshyclor) ؛ </script> </html>نتيجة الإخراج:
والإخراج مرحبا الجميع تحت وحدة التحكم
دعونا نلقي نظرة على $ transclude () ؛ هنا ، قد يستغرق الأمر معلمتين ، الأول هو نطاق $ ، والنطاق ، والثاني هو وظيفة رد الاتصال مع استنساخ المعلمة. وهذا الاستنساخ هو في الواقع المحتوى المدمج (ملفوفة بواسطة jQuery) ، ويمكنك القيام بالكثير من عمليات DOM عليها.
أسهل طريقة لها
<script> Angular.module ('myapp' ، []). التوجيه ('mysite' ، function () {return {restrict: 'ea' ، transclude: true ، controller: function ($ scope ، $ element ، $ attrs ، $ transclude ، $ log) {var a = $ transclude () ؛ // $ transclude () }) ؛ </script>ملاحظة: سيؤدي استخدام $ transclude إلى إنشاء نطاق جديد.
افتراضيًا ، إذا استخدمنا ببساطة وعمليًا transclude () ، فإن النطاق الافتراضي هو النطاق الذي تم إنشاؤه بواسطة $ transclude
ولكن إذا استخدمنا $ transclude (نطاق $ ، وظيفة (استنساخ) {}) ، فإن النطاق هو نطاق التوجيه
ثم يأتي السؤال مرة أخرى. ماذا لو أردنا استخدام نطاق الوالد
نطاق $. يمكن استخدام الوالد $
وبالمثل ، إذا كنت تريد نطاقًا جديدًا ، فيمكنك أيضًا استخدام $ Scope. $ parent.new () ؛
10.controlleras
يتم استخدام هذا الخيار لتعيين الاسم المستعار في وحدة التحكم الخاصة بك
في الماضي ، استخدمنا هذه الطريقة في كثير من الأحيان لكتابة الرمز:
Angular.Module ("app" ، []) .Controller ("democontroller" ، ["$ scope" ، function ($ scope) {$ scope.في وقت لاحق ، جلبنا AngularJS1.2 سكر بناء جملة جديد ، حتى نتمكن من كتابته مثل هذا
angular.module ("app" ، []) .Controller ("democontroller" ، [function () {this.title = "jualr" ؛}]) <div ng-app = "app" ng-controller = "democontroller as demo"> {{{demo.title}يمكننا أيضًا كتابة هذا في الأمر
<script> Angular.module ('myapp' ، []). التوجيه ('mysite' ، function () {return {restrict: 'ea' ، transclude: true ، controller: 'somecontroller' ، controleras: 'mainController' //..oth} ؛} ؛}) ؛ </script>11.require (سلسلة أو صفيف)
تمثل السلسلة اسم التعليمات الأخرى ، والتي سيتم استخدامها كمعلمة رابعة لوظيفة الارتباط. يمكننا إعطاء مثال لتوضيح الاستخدام المحدد. لنفترض أنه يتعين علينا كتابة تعليمين الآن. هناك العديد من الأساليب المتداخلة في وظيفة الارتباط (سيتم مناقشة وظيفة الارتباط لاحقًا). في هذا الوقت ، يمكننا كتابة هذه الأساليب المتكررة في وحدة تحكم التعليمات الثالثة (تم ذكر وحدة التحكم أعلاه أيضًا لتوفير سلوك إعادة الاستخدام بين التعليمات). ثم في هاتين التعليمات ، طلب التعليمات مع حقل وحدة التحكم (التعليمات الثالثة).
أخيرًا ، يمكنك الرجوع إلى هذه الأساليب المتداخلة من خلال المعلمة الرابعة لوظيفة Link Link.
<! doctype html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </prick> <body> <inner-dirctive2> </inner-directive2> </ueter-directive> <script> var app = Angular.Module ('myapp' ، []) ؛ app.diRective ('OuterDirective' ، function () {return {scope: {} ، تقييد: 'ae' ، controller: function ($ scope) {this.say = function (يومًا ما) {console.log ('got:' + يومًا ما. app.diRective ('innerdirective' ، function () {return {scope: {} ، redrict: 'ae' ، require: '^outerdirective' ، link: function (scope ، elem ، attrs ، controlerinstance) {spect.message = "hi ، leifeng" ؛ app.diRective ('innerdirective2' ، function () {return {scope: {} ، redict: 'ae' ، require: '^outerdirective' ، link: function (scope ، elem ، attrs ، controlerinstance) {spic.message = "hi ، shushu" ؛ controlrinstance.say (scope) ؛} ؛} ؛ </script> </body> </html>التعليمات الداخلية والتوجيهية الداخلية 2 في أساليب إعادة استخدام مثال أعلاه المحددة في وحدة تحكم التوجيه الخارجي.
تم شرح ذلك أيضًا أن وحدة التحكم في التعليمات تستخدم للتواصل بين التعليمات المختلفة.
بالإضافة إلى ذلك ، يمكننا إضافة بادئة إلى قيمة المعلمة للمطالب ، والتي ستغير سلوك وحدة تحكم البحث:
(1) بدون بادئة ، سيتم البحث في التعليمات في وحدة التحكم المقدمة بنفسها. إذا لم يتم العثور على وحدة تحكم ، فسيتم طرح خطأ.
(2)؟ إذا لم يتم العثور على وحدة التحكم المطلوبة في التعليمات الحالية ، فسيتم تمرير NULL إلى المعلمة الرابعة لوظيفة اتصال الارتباط
(3)^إذا لم يتم العثور على وحدة التحكم المطلوبة في التعليمات الحالية ، فسيتم العثور على وحدة تحكم العنصر الأصل
(4)؟^ مزيج
12. عملية تجميع تعليمات Anguar
قم أولاً بتحميل مكتبة AngularJS وابحث عن توجيه NG-APP للعثور على حدود التطبيق.
استدعاء خدمة ترجمة $ لتجميع وفقًا للنطاق المحدد بواسطة NG-App. سوف يعبر AngularJS مستند HTML بالكامل ومعالجة التعليمات المعلنة على الصفحة وفقًا لأولوية التعليمات وفقًا للتعليمات. يتم تحويل DOM وفقًا لمعلمات التكوين (القالب ، المكان ، transclude ، إلخ) في التعليمات ، ثم ابدأ في تنفيذ وظيفة الترجم لكل تعليمة بالترتيب (إذا تم تعريف وظيفة الترجمة على التعليمات) لتحويل القالب نفسه.
ملاحظة: تم تكوين وظيفة التجميع هنا في توجيهنا ، والتي تختلف عن خدمة التجميع $ المذكورة أعلاه. بعد تنفيذ كل وظيفة ترجمة ، سيتم إرجاع وظيفة الارتباط ، وسيتم دمج جميع وظائف الارتباط في وظيفة ارتباط كبيرة.
بعد ذلك ، سيتم تنفيذ وظيفة الارتباط الكبيرة هذه ، بشكل أساسي لربط البيانات ، تعديل البيانات ديناميكيًا في النطاق عن طريق تسجيل مستمع على DOM ، أو استخدام ساعات $ للاستماع إلى المتغيرات في النطاق لتعديل DOM ، وبالتالي إنشاء ربط ثنائي الاتجاه ، وما إلى ذلك. ما تفعله هو نفسه تقريبًا مثل وظيفة الارتباط الكبيرة التي تم تصنيعها بواسطة جميع وظائف الارتباط بعد عودة الترجمة أعلاه.
لذلك: في التوجيه ، تكون خيارات التجميع والارتباط حصرية بشكل متبادل. إذا تم تعيين هذين الخيارين في نفس الوقت ، فسيتم اعتبار الوظيفة التي يتم إرجاعها بواسطة التجميع وظيفة ارتباط ، وسيتم تجاهل خيار الارتباط نفسه.
13. وظيفة التجميع
تجميع الوظيفة (Telement ، Tattrs ، transclude) {...}
تُستخدم وظائف التجميع للتعامل مع المواقف التي يحتاج فيها القالب إلى تعديل DOM. نظرًا لأن معظم التعليمات لا تتطلب تعديل القالب ، فإن هذه الوظيفة غير شائعة الاستخدام. تتضمن الأمثلة التي يجب استخدامها ngtrepeat ، الأمر الذي يتطلب تعديل القالب ، ويتطلب NGVIEW تحميل المحتوى بشكل غير متزامن. تقبل الدالة المترجمة المعلمات التالية.
Telement - عنصر القالب - العنصر الذي يتواجد فيه التوجيه. من الآمن تشويه هذا العنصر وعناصره الفرعية.
TATTRS - سمات القالب - يتم مشاركة جميع السمات المعلنة من خلال التوجيه على هذا العنصر في الدالة المترجمة.
transclude - وظيفة وظيفة الارتباط المدمجة (Scope ، clonelinkingFN).
ملاحظة: لا تنفذ أي عمليات بخلاف تشوه DOM في الدالة المترجمة. الأهم من ذلك ، يجب إجراء تسجيل أحداث الاستماع DOM في الوظيفة المرتبطة ، وليس في الوظيفة المترجمة.
يمكن للدالة المترجمة إرجاع كائن أو دالة.
وظيفة الإرجاع - تعادل وظيفة الارتباط المسجلة باستخدام سمة الارتباط لكائن التكوين عند عدم وجود دالة المترجمة.
إرجاع كائن - إرجاع كائن سجل وظيفة من خلال سمة ما قبل أو نشر. ارجع إلى شرح وظائف ما قبل الربط وما بعد النهائي أدناه.
14. ربط الوظيفة
رابط الوظيفة (النطاق ، ielement ، IATTRS ، وحدة التحكم) {...}
وظيفة الارتباط مسؤولة عن تسجيل أحداث DOM وتحديث DOM. يتم تنفيذه بعد استنساخ القالب ، وهو أيضًا حيث يتم كتابة معظم رمز منطق التعليمات.
النطاق - النطاق الذي تحتاجه التوجيهات إلى الاستماع.
IElement - عنصر مثيل - العنصر الذي يتواجد فيه التوجيه. من الآمن أن تعمل على عناصر الأطفال في وظيفة Postlink ، لأنه بعد ذلك يتم ربطها جميعًا.
IATTRS - سمات المثيل - سمات المثيل ، قائمة موحدة من السمات المعلنة على العنصر الحالي ، والتي تتم مشاركتها بين جميع الوظائف المرتبطة.
وحدة التحكم - مثيل وحدة التحكم ، أي وحدة التحكم داخل Direct2 المطلوبة بواسطة التعليمات الحالية. على سبيل المثال: Controller: function () {this.addStrength = function () {}} في توجيه Direct2 ، ثم في وظيفة الارتباط في التوجيه الحالي ، يمكنك الاتصال به من خلال Controller.addStrength.
تنفذ وظيفة الربط قبل أن ترتبط عناصر الطفل. لا يمكن استخدامه لتشويه DOM في حالة عدم العثور على وظيفة الارتباط العنصر الصحيح للارتباط.
وظيفة ما بعد الارتباط يتم تنفيذ جميع العناصر بعد ربطها.
يوضح:
لا يتم استخدام خيار التجميع نفسه بشكل متكرر ، ولكن يتم استخدام وظيفة الارتباط بشكل متكرر. بشكل أساسي ، عندما نقوم بتعيين خيار الارتباط ، نقوم بالفعل بإنشاء وظيفة ارتباط postlink () بحيث يمكن أن تحدد وظيفة compile () وظيفة الارتباط. بشكل عام ، إذا تم تعيين وظيفة التجميع ، فهذا يعني أننا نريد إجراء عمليات DOM قبل وضع التعليمات والبيانات في الوقت الفعلي في DOM. من الآمن إجراء عمليات DOM مثل إضافة وحذف العقد في هذه الوظيفة. خيارات التجميع والارتباط حصرية بشكل متبادل. إذا تم تعيين هذين الخيارين في نفس الوقت ، فسيتم اعتبار الوظيفة التي يتم إرجاعها بواسطة التجميع وظيفة ارتباط ، وسيتم تجاهل خيار الارتباط نفسه. وظيفة الترجمة مسؤولة عن تحويل القالب DOM. وظيفة الارتباط مسؤولة عن ربط النطاق و DOM. يمكن تشغيل DOM يدويًا قبل ربط النطاق بـ DOM. في الممارسة العملية ، يكون هذا النوع من التشغيل نادرًا جدًا عند كتابة تعليمات مخصصة ، ولكن هناك العديد من الإرشادات المدمجة التي توفر هذه الوظائف. وظيفة الارتباط اختيارية. إذا تم تعريف وظيفة تم تجميعها ، فإنها تُرجع الوظيفة المرتبطة ، لذلك عندما يتم تعريف كلتا الوظيفتين ، فإن الدالة المترجمة تعمل على زيادة الدالة المرتبطة. إذا كانت تعليماتنا بسيطة ولا تتطلب إعدادات إضافية ، فيمكننا إرجاع وظيفة من وظيفة المصنع (وظيفة رد الاتصال) لاستبدال الكائن. إذا تم ذلك ، فإن هذه الوظيفة هي وظيفة الارتباط.
تم استنساخ هذه المقالة http://blog.csdn.net/evankaka
ما سبق هو المحتوى الكامل لاستخدام AngularJS: تعليمات التوجيه ، آمل أن يكون مفيدًا لتعلم الجميع.