يدعم AngularJS خصائص العلامة المعرفة من قبل المستخدم وإضافة محتوى مخصص دون استخدام عمليات عقدة DOM.
تم ذكر الميزات الرئيسية الأربعة من AngularJs في وقت سابق:
1 MVC
2 وحدات
3 تعليمات
4 ربط البيانات ثنائية الاتجاه
سيتم تقديم ما يلي:
1 كيفية تخصيص الأمر
2 استخدام التعليمات المخصصة
3 الاستخدام المضمّن للتوجيهات المخصصة
كيفية تخصيص التوجيهات:
Angular عبارة عن إطار عمل قائم على الوحدة ، لذلك يجب عليك إنشاء الوحدة النمطية الخاصة بك:
var myappmodule = Angular.module ("myapp" ، []) ؛
ثم قم بإنشاء توجيه على هذه الوحدة
myappmodule.directive ("xingoo" ، function () {return {rody: 'aecm' ، template: '<viv> hello my threadive </viv>' ، replace: true}}) ؛من بينها ، Xingoo هو اسم العلامة المخصصة لدينا ، تليها وظيفة الطريقة.
تقوم الوظيفة بإرجاع مجموعة زوج القيمة الرئيسية ، والتي تحدد طرق الاستخدام ، والخصائص ، وما إلى ذلك من العلامة.
دعونا نرى ما يحدده:
1 تقييد: يحدد طرق استخدام العلامات ، مع ما مجموعه أربعة أنواع ، وهي AECM
2 قالب: تحديد القالب للعلامة. الداخل عبارة عن سلسلة تستخدم لاستبدال العلامات المخصصة
3 استبدال: ما إذا كان لدعم الاستبدال
4 transclude: سواء لدعم مضمن
كيفية استخدام الأمر:
المذكورة أعلاه أربع طرق لاستخدام الملصقات ، وهي AECM.
سمة: تستخدم كسمة
<div xingoo> </viv>
E element: يستخدم كعنصر تسمية
<xingoo> </singoo>
C Class: يستخدم كأسلوب CSS
<viv> </viv>
تعليقات التعليقات: تستخدم كتعليقات (هذه الطريقة غير متوفرة في الإصدار 1.2!)
<!-التوجيه: Xingoo->
<viv> </viv>
بشكل عام ، يوصى باستخدامه كسمات وعناصر.
عندما تريد تمديد السمات على علامات HTML الموجودة ، استخدم طريقة السمة.
عندما تريد تخصيص العلامة ، خذ شكل علامة.
لاستخدام هذه الطريقة ، يجب أن تعلن الحرف المقابل في التقييد في التوجيه التعريف.
استخدام التوجيهات المضمنة:
نظرًا لأنه يمكن تداخل العلامات الأخرى داخل العلامة ، إذا كنت ترغب في عش علامات العناصر الأخرى في علامة مخصصة ، فأنت بحاجة إلى:
1 استخدم خاصية Transclude ، وضبطها على True.
2 واستخدم خاصية NG-Transclude لتحديد الموقع المتداخل الداخلي.
الرمز كما يلي:
myappmodule.directive ("test" ، function () {return {rody: 'aecm' ، Translate: true ، template: "<viv> haha! <div ng-transclude> </viv> wuwu! </viv>"}}) ؛جميع الرموز
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <xingoo> </xingoo> <div xingoo> <xingoo> 3333 </singoo> <hr> <test> 4444 </tect> <script type = "text/javaScript"> var myappmodule = Angular.Module ("myapp" ، []) ؛ myappmodule.directive ("xingoo" ، function () {return {rody: 'aecm' ، template: '<viv> hello my threadive </viv>' ، replace: true}}) ؛ myappmodule.directive ("test" ، function () {return {rodort: 'aecm' ، transclude: true ، true ، template: "<viv> haha! <div ng-transclude> </viv> wuwu! </viv>"}) ؛ </script> </body> </html>نتائج التشغيل
ما سبق هو المعلومات التي تقوم بفرز التوجيهات المخصصة لـ AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!