تعدد اللغات AngularJS حقول التدفق المدمج AngularJS

تعليمات مخصصة AngularJS

استخدم أوامر custom لتمديد وظائف HTML في AngularJS. يتم تعريف أوامر custom باستخدام ميزة "أوامر". يتم استبدال الأوامر المفعلة فقط. في وقت التوجيه، يجد AngularJS العناصر المطابقة ويستخدمها.compile()يُنشط دليل custom مرة واحدة، ثمlink()استخدم طرق دليل custom لمعالجة العنصر بناءً على نطاق الأوامر. AngularJS يدعم إنشاء أوامر مخصصة للعناصر التالية.

أوامر عناصر −تُنشط الأوامر عند وجود عنصر يتطابق.
خصائص −تُنشط الأوامر عند وجود خاصية تتطابق.
CSS −تُنشط الأوامر عند وجود نمط CSS يتطابق.
تعليق −تُنشط الأوامر عند وجود تعليق يتطابق.

فهم الأوامر المخصصة

تعريف علامات html مخصصة.

<student name = "Sea"></student><br/><student name = "Piyush"></student>

تعريف دليل مخصص لمعالجة علامات html المخصصة المذكورة أعلاه.

var　mainApp　=　angular.module("mainApp",　[]);
//أنشئ دليلاً أولاً هو العنصر html الذي سنقوم بتعديله.	　　
//سنقوم بتعديل علامة html للطالب.　
//تُنشط هذا الأوامر عند وجود أي عنصر Student في html.
mainApp.directive('student',　function()　{
　　　//تعريف دليل الأوامر.
　　　var　directive　=　{};
　　　
　　　//limit = E،يعني أن هذا هو دليل Element.
　　　directive.restrict　=　'E';
　　　
　　　//سيحل المُنصب المُعدل النص الكامل للعنصر.　
　　　directive.template = "طالب:　<b>{{student.name}}</b>　,　
　　　　　　Roll No:　<b>{{student.rollno}}</b>";
　　　
　　　//يستخدم النطاق للتمييز بين عناصر الطالب بناءً على الشروط.
　　　directive.scope　=　{
　　　　　　student　:　"=name"
　　　}
　　　
　　　//تُطلق compile في وقت بدء التطبيق. AngularJS calls　
　　　　　　it once when html page is loaded.
　　　directive.compile　=　function(element,　attributes)　{
　　　　　　element.css("border",　"1px　solid　#cccccc");
　　　　　　
　　　　　　//linkFunction مع كل عنصر في النطاق للحصول على بيانات معينة للعنصر.
　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　element.html("طالب:　<b>"+$scope.student.name　+"</b>　,　
　　　　　　　　　　　　رقم التسجيل:　<b>"+$scope.student.rollno+"</b><br/>");
　　　　　　　　　element.css("background-color", "#ff00ff");
　　　　　　}
　　　　　　return linkFunction;
　　　}
　　　
　　　return directive;
});

تحديد التحكم لتحديث نطاق التعليمات. هنا، نستخدم قيمة الخاصية name كفرع من النطاق.

mainApp.controller('StudentController', function($scope) {
　　　$scope.Sea = {};
　　　$scope.Sea.name = "Sea Gull";
　　　$scope.Sea.rollno = 1;
　　　
　　　$scope.Piyush = {};
　　　$scope.Piyush.name = "Piyush Gull";
　　　$scope.Piyush.rollno = 2;
});

مثال على الخط

مثال

<html>
　　　<head>
　　　　　　<title>تعليمات AngularJS-مخصصة</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>مثال على تعليمات AngularJS-مخصصة</h2>
　　　　　　
　　　　　　<div　ng-app　=　"mainApp"　ng-controller　=　"StudentController">
　　　　　　　　　<student　name　=　"Sea"></student><br/>
　　　　　　　　　<student　name　=　"Piyush"></student>
　　　　　　</div>
　　　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.directive('student',　function()　{
　　　　　　　　　　　　var　directive　=　{};
　　　　　　　　　　　　directive.restrict　=　'E';
　　　　　　　　　　　　directive.template　=　"طالب:　<b>{{student.name}}</b>　,　رقم التسجيل:　<b>{{student.rollno}}</b>";
　　　　　　　　　　　　
　　　　　　　　　　　　directive.scope　=　{
　　　　　　　　　　　　　　　student　:　"=name"
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　directive.compile　=　function(element,　attributes)　{
　　　　　　　　　　　　　　　element.css("border",　"1px　solid　#cccccc");
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　　　　　　　　　　element.html("طالب:　<b>"+$scope.student.name　+"</b>　,　رقم التسجيل:　<b>"+$scope.student.rollno+"</b><br/>");
　　　　　　　　　　　　　　　　　　element.css("background-color", "#ff00ff");
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　return linkFunction;
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　return directive;
　　　　　　　　　});
　　　　　　　　　
　　　　　　　　　mainApp.controller('StudentController', function($scope) {
　　　　　　　　　　　　$scope.Sea = {};
　　　　　　　　　　　　$scope.Sea.name = "Sea Gull";
　　　　　　　　　　　　$scope.Sea.rollno = 1;
　　　　　　　　　　　　$scope.Piyush = {};
　　　　　　　　　　　　$scope.Piyush.name = "Piyush Gull";
　　　　　　　　　　　　$scope.Piyush.rollno = 2;
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لمعرفة‹/›

عرض النتيجة

فتح في متصفح الويبtextAngularJS.htmعرض النتيجة.

تعدد اللغات AngularJS حقول التدفق المدمج AngularJS

درس AngularJS الأساسي

تعليمات مخصصة AngularJS

فهم الأوامر المخصصة

مثال على الخط