تفسير AngularJS لـ custom directive مع أمثلة على الكود

AngularJS يدعم خاصيات العلامات المخصصة للإضافات، ويضيف محتوى مخصص دون الحاجة إلى عمليات تعامل مع عناصر DOM.

تم ذكر أربعة خصائص AngularJS الكبيرة سابقًا:

　　1 MVC

　　2 الت模块ة

　　3 التعليمات

　　4 التحقق المتبادل للبيانات

سنتحدث عن المواضيع التالية:

　　1 كيفية إنشاء التعليمات المخصصة

　　2 استخدام التعليمات المخصصة

　　3 استخدام التعليمات المخصصة للاشتراك في النص

　　كيفية إنشاء التعليمات المخصصة:

　　Angular هو إطار عمل يعتمد على المودول، لذا يجب إنشاء مودول خاص بك في البداية:

var myAppModule = angular.module("myApp",[]);

　　ثم يتم إنشاء directive على أساس هذا المodule　　　　　　

 myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });

　　xingoo هو اسم العلامة المخصصة الخاصة بنا، يتبعه دالة الطريقة الخاصة بها.

　　يعود الدالة return إلى مجموعة من المفاتيح القيم، حيث يتم تعريف طريقة استخدام العلامة والخصائص وما إلى ذلك.

　　لنرى ما الذي تم تعريفه داخلها:

　　1 restrict: يحدد طريقة استخدام العلامة، ويوجد أربعة أنواع، وهي AECM

　　2 template: تحديد قالب العلامة. إنه نص يتم استبداله بعلامة مخصصة.

　　3 repalce: هل يدعم الاستبدال

　　4 transclude: هل يدعم التضمين الداخلي

　　كيفية استخدام التعليمات:

　　تم ذكر الطريقة الأربعة لتشغيل العلامات، وهي AECM.

　　A الخاصية: تستخدم كخاصية

　　E العنصر: تستخدم كعنصر علامة

　　C الصف: تستخدم كنمط CSS

　　M التعليقات: تستخدم كتعليقات (هذا الطريقة لم تتم اختبارها في إصدار 1.2!)

<div></div>

　　عادة ما يُنصح بتشغيلها كخصائص وكتقاليد.

　　عندما تريد توسيع خصائص علامة html موجودة، استخدم شكل الخاصية.

　　عندما تريد إنشاء علامة مخصصة، استخدم شكل العلامة.

　　إذا كنت ترغب في استخدام الطريقة المحددة، يجب أن يتم إعلان الحرف المناسب في خاصية restrict من directive.　

　　استخدام التعليمات للاشتراك في النص:

　　بما أن يمكن تضمين علامات أخرى داخل علامة، فإنك تحتاج إلى:

　　1 يتم تعيين خاصية transclude إلى true.

　　2 يستخدم ng-transclude لتحديد موقع النص الداخلي المدمج.

　　النصوص التالية:　　　　　　

  myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });

　　كل الكود

<!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></div>
  <div class="xingoo"></div>
  <!-- directive:xingoo -->
  <div></div>
  <hr>
  <xingoo>3333</xingoo>
  <hr>
  <test>4444</test>
  <script type="text/javascript">
   var myAppModule = angular.module("myApp",[]);
   myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });
   myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
  </script>
 </body>
</html>

　　نتيجة التنفيذ

هذا هو جمع المعلومات حول أوامر AngularJS المخصصة، وسنستمر في إضافة المعلومات ذات الصلة لاحقًا، شكرًا للجميع على دعم هذا الموقع!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، يملك حقوق الطبع والنشر أصحاب الملكية، تم إضافة المحتوى من قبل مستخدمي الإنترنت بطرقهم الخاصة، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الدليل على الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.

أساسيات التعليمات

تحب أن تراه