استخدم AngularJS لتوسيع وظائف HTML في التوجيهات المخصصة. التعريف الوظيفي لـ "التعليمات" المستخدمة من قبل التوجيهات المخصصة. يستبدل التوجيه المخصص فقط العنصر الذي يتم تنشيطه. أثناء عملية التمهيد ، يجد تطبيق AngularJS عنصر المطابقة ، ويقوم بعمل جيد لاستخدام طريقة تعليمات مخصصة () لنشاط واحد ثم التعامل مع العناصر باستخدام طريقة الرابط () التعليمات المخصصة بناءً على نطاق التعليمات. يوفر AngularJS الدعم لإنشاء توجيهات مخصصة مع العناصر التالية من النوع.
توجيهات العناصر - قم بتفعيل عنصر مطابقة عند مواجهة التوجيه.
السمة - - تنشيط سمة مطابقة عند لقاءات التوجيه.
CSS - - تنشيط أنماط CSS مطابقة عندما تواجه التعليمات.
التعليق - - تنشيط التعليقات المطابقة عند لقاءات التوجيه.
فهم الأوامر المخصصة
تحديد علامات HTML المخصصة.
<اسم الطالب = "mahesh"> </student> <br/>
<اسم الطالب = "piyush"> </student>
تحديد التوجيهات المخصصة للتعامل مع علامات HTML المخصصة أعلاه.
var mainapp = Angular.module ("mainapp" ، []) ؛ // إنشاء توجيه ، المعلمة الأولى هي عنصر HTML المراد إرفاقه. //نحن نرفق علامة HTML الطالب. // سيتم تنشيط هذا التوجيه بمجرد مواجهة أي عنصر طالب في htmlmainapp.directive ('الطالب' ، الدالة () {// تحديد كائن التوجيه var var threarive = {} ؛ // rodrict = e ، يدل على أن التوجيه هو توجيه العناصر. <b> {{student.name}} </b> ، Roll no: <b> {{student.rollno}} </b> "؛ الوظيفة (العنصر ، السمات) {element.css ("الحدود" ، "1PX Solid #CCCCC") ؛ <b> "+$ scope.student.rollno+" </b> <br/> ") ؛ element.css (" background-color "،"#ff00ff ") ؛} return linkfunction ؛} return threarive ؛}) ؛حدد وحدة التحكم لتحديث النطاق كتعليمات. هنا نستخدم قيمة سمة الاسم كنطاق للطفل.
mainapp.controller ('studentController' ، function ($ scope) {$ scope.mahesh = {} ؛ $ scope.mahesh.name = "mahesh parashar" ؛ $ scope.mahesh.rollno = 1 ؛ $ scope.piyush = {} ؛ $ scope.piyush.name = "piyush $ scope.piyush.rollno = 2 ؛}) ؛مثال
<html> <head> <title> angular js توجيهات مخصصة </title> </head> <body> <h2> تطبيق عينة AngularJS </h2> <div ng-app = "mainapp" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script> var mainapp = Angular.Module ("mainapp" ، []) ؛ mainapp.directive ('student' ، function () {var varive = {} ؛ التوجيه .Restrict = 'e' ؛ توجيهات. السمات) {element.css ("الحدود" ، "1PX Solid #CCCCCCCC") ؛ element.css ("خلفية اللون" ، "#ff00ff") ؛ mainapp.controller ('studentController' ، function ($ scope) {$ scope.mahesh = {} ؛ $ scope.mahesh.name = "mahesh parashar" ؛ $ scope.mahesh.rollno = 1 ؛ $ scope.piyush = {} ؛ $ scope.piyush.name = "piyush $ scope.piyush.rollno = 2 ؛ </script> </body> </html>نتيجة
افتح textangularjs.html في متصفح الويب. النتائج كما يلي:
ما سبق هو تجميع معلومات الأوامر المخصصة لـ AngularJS ، وسنستمر في إضافتها لاحقًا. شكرا لك على دعمك لهذا الموقع!