التوجيه المخصص في AngularJS: القوالب، النطاق، والتضمين

ما هو التوجيه المخصص في AngularJS؟

A التوجيه المخصص في AngularJS، تُعدّ هذه الخاصية توجيهًا مُعرّفًا من قِبل المستخدم، يُوسّع نطاق HTML بسلوكيات يكتبها المستخدم بنفسه. ويتم تسجيلها على وحدة باستخدام وظيفة "التوجيه"، يقوم AngularJS بربطها أينما يظهر العنصر أو السمة المطابقة في الصفحة. على الرغم من أن AngularJS يمتلك الكثير من الميزات القوية التوجيهات المضمنة خارج الصندوق، مثل نانوغرام تكرارفي بعض الأحيان، تكون التوجيهات المخصصة مطلوبة.

⚠️ تصحيح: ذكرت النسخة الأصلية أن التوجيه المخصص "يستبدل العنصر الذي يُستخدم من أجله". لكنه لا يفعل ذلك افتراضياً: template يتم إدراجها في الداخل العنصر المطابق. الحاجة إلى الاستبدال replace: true، تم إيقاف استخدامها منذ AngularJS 1.3.

⚠️ إشعار الدعم: وصل AngularJS نهاية الحياة في 31 ديسمبر 2021 ولا يتلقى أي تحديثات أو إصلاحات أمنية إضافية. كل ما يلي يبقى صحيحًا للحفاظ على كود AngularJS 1.x الحالي؛ في Angular الحديث، المكافئ هو المكونات وتوجيهات السمات.

يكمن سبب اللجوء إلى التوجيه المخصص في التكرار. فعندما يظهر نفس الترميز أو توصيل DOM على عدة شاشات، يقوم التوجيه بتحويله إلى علامة واحدة مُسماة.

كيفية إنشاء توجيه مخصص؟

دعونا نلقي نظرة على مثال لكيفية إنشاء توجيه مخصص في AngularJS.

سيقوم التوجيه المخصص في حالتنا ببساطة بإدراج عنصر div يحتوي على النص "Angular JS Tutorial" في صفحتنا عند استدعاء التوجيه.

تُظهر لقطة الشاشة المرفقة أدناه ترقيم الأجزاء الأربعة من القائمة الموضحة أدناه.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.directive('ngGuru',function(){

    return {
        template: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

⚠️ تحذير — العيوب محفوظة في هذه القائمة: تمت إعادة إنتاج الكود تمامًا كما نُشر. تتكرر ثلاثة عيوب في كل قائمة هنا: chrset="UTF 8" ينبغي أن تكون charset="UTF-8"; angular.js و angular.min.js يتم تحميل كليهما، لذا يتم تحميل AngularJS مرتين؛ و angular-route.js يتم تحميله قبل الملف الذي يعتمد عليه.

Code تفسير

1. نحن نقوم أولاً بإنشاء ملف وحدة هذا ضروري لتطبيق AngularJS الخاص بنا. لإنشاء توجيه مخصص، حيث سيتم إنشاء التوجيه باستخدام هذه الوحدة.
2. نقوم الآن بإنشاء توجيه مخصص يسمى "ng"Guru"وتحديد دالة المصنع التي ستحتوي على التعليمات البرمجية المخصصة لتوجيهنا."
3. نستخدم مُعامل القالب، وهو مُعامل مُعرّف في AngularJS للتوجيهات المُخصصة. في هذا السياق، نُحدد أنه عند استخدام هذا التوجيه، يتم استخدام قيمة القالب وإدراجها في الكود المُستدعي.
4. هنا نستخدم الآن توجيه "ng-guru" الذي أنشأناه خصيصًا. عند القيام بذلك، يتم تطبيق القيمة التي حددناها للقالب الخاص بنا. <div>Angular JS Tutorial</div>سيتم حقنها هنا الآن.

تسمية التوجيهات وتوحيدها

عدم تطابق الأسماء بين Javaيُربك كلٌ من البرمجة النصية ولغة HTML معظم المبتدئين. AngularJS تطبيع كل اسم عنصر وسمة قبل مطابقته: يقوم بإزالة أي x- or data- ثم يقوم بتحويل الاسم المحدد بواسطة البادئة -, : or _ إلى نمط كتابة الجمل (camelCase). لهذا السبب ngGuru اعواد الثقاب ng-guru، و لماذا data-ng-guru يعمل أيضاً. صيغة camelCase هي الاسم الحقيقي؛ أما صيغة kebab-case فهي ببساطة طريقة كتابتها في لغة HTML.

⚠️ تصحيح: نصّ النص الأصلي على أن اسم التوجيه المخصص "يجب أن يبدأ بالحرفين 'ng'". الوثائق الرسمية لـ AngularJS ينصح بخلاف ذلك: لا تُسبق توجيهاتك الخاصة بـ ngأو قد تتعارض مع ميزة مدمجة مستقبلية. استخدم بادئة خاصة بك، مثل g99Guru مكتوب كـ g99-guru.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

يُظهر الناتج بوضوح أن توجيه ng-guru المُخصص، الذي يحتوي على القالب المُعرّف لعرض نص مُخصص، يظهر في المتصفح. الخطوة التالية هي وضع شيء قابل لإعادة الاستخدام داخل هذا القالب.

كيفية إنشاء توجيهات قابلة لإعادة الاستخدام

لقد رأينا بالفعل قوة التوجيهات المخصصة، ولكن يمكننا أن نأخذ ذلك إلى المستوى التالي من خلال بناء توجيهاتنا القابلة لإعادة الاستخدام.

لنفترض، على سبيل المثال، أننا أردنا إدخال كود من شأنه أن يعرض دائمًا علامات HTML أدناه عبر شاشات متعددة، وهو في الأساس مجرد مدخل لـ "اسم" و "عمر" المستخدم.

لإعادة استخدام هذا الجزء على شاشات متعددة دون الحاجة إلى كتابة التعليمات البرمجية في كل مرة، نقوم بإنشاء عنصر تحكم رئيسي، أو توجيه، في AngularJS لاحتواء عنصري التحكم هذين.

الآن، بدلاً من تكرار هذا الترميز على كل شاشة، نقوم بتضمينه في توجيه واستدعاء هذا التوجيه. تُظهر لقطة الشاشة أدناه السطر الوحيد الذي يتغير.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Code تفسير

• في مقتطف الشفرة الخاص بتوجيه مخصص، ما يتغير هو القيمة المُعطاة لمعامل القالب. فبدلاً من وسم عادي أو سطر نصي، ندخل كامل جزء من عنصرَي إدخال لـ "الاسم" و"العمر" المطلوب عرضهما على صفحتنا.

؟؟؟؟ تلميح: قالب بهذا الطول يجب أن يكون في ملف منفصل. تبديل template لـ templateUrl: 'name-age.html'.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

من المخرجات أعلاه، نلاحظ إضافة جزء من الكود من قالب التوجيه المخصص إلى الصفحة. القالب لا يزال ثابتًا، لذا فإن الخطوة التالية هي تزويده بالبيانات.

توجيهات ونطاقات AngularJS

استخدم نطاق يُعرَّف بأنه الرابط الذي يربط وحدة التحكم بالعرض من خلال إدارة البيانات بين العرض ووحدة التحكم.

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

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

لنلقِ نظرة على مثال لكيفية استخدام نطاق وحدة التحكم الرئيسية في التوجيه المخصص. توضح لقطة الشاشة أدناه الخطوات الأربع.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {
        $scope.tutorialName = "Angular JS";

    });

        app.directive('ngGuru',function(){
        return {
         template: '<div>{{tutorialName}}</div>'
     }
    });

</script>

</body>
</html>

Code تفسير

1. نقوم أولاً بإنشاء وحدة تحكم تسمى "DemoController". في هذه الوحدة، نقوم بتعريف متغير يسمى tutorialName ونربطه بكائن النطاق في عبارة واحدة: $scope.tutorialName = "Angular JS".
2. في توجيهنا المخصص، يمكننا استدعاء المتغير "tutorialName" باستخدام تعبير. يمكن الوصول إلى هذا المتغير لأنه تم تعريفه في وحدة التحكم "DemoController"، والتي ستصبح الأصل لهذا التوجيه.
3. نحن نشير إلى وحدة التحكم في علامة div، والتي ستكون بمثابة علامة div الأصلية لدينا. لاحظ أنه يجب القيام بذلك أولاً حتى يتمكن توجيهنا المخصص من الوصول إلى متغير TutorialName.
4. لقد قمنا أخيرًا بإرفاق التوجيه المخصص لدينا "ng-guru" بعلامة div الخاصة بنا.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

يُظهر الناتج أعلاه بوضوح أن التوجيه المخصص "ng-guru" يستخدم متغير النطاق tutorialName في وحدة التحكم الرئيسية. مشاركة نطاق الوحدة الرئيسية أمرٌ مُريح، ولكنه ليس دائمًا ما ترغب فيه.

استخدام وحدات التحكم مع التوجيهات

يوفر AngularJS إمكانية الوصول إلى متغير عضو وحدة التحكم مباشرة من التوجيهات المخصصة دون الحاجة إلى كائن النطاق.

يصبح هذا الأمر ضرورياً في بعض الأحيان لأن التطبيق قد يحتوي على كائنات نطاق متعددة تنتمي إلى وحدات تحكم متعددة، لذلك هناك احتمال كبير للوصول إلى كائن النطاق الخاص بوحدة التحكم الخاطئة عن طريق الخطأ.

في مثل هذا السيناريو، هناك طريقة لقول "أريد الوصول إلى وحدة التحكم هذه" تحديدًا من خلال توجيهي.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك. تُظهر لقطة الشاشة الخطوات الأربع.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru99=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function() {
        this.tutorialName = "Angular";

    });

     app.directive('ngGuru99',function(){
        return {
         controller: 'DemoController',

          controllerAs: 'ctrl',

          template: '{{ctrl.tutorialName}}'
     };
    });

</script>

</body>
</html>

Code تفسير

1. نقوم أولاً بإنشاء وحدة تحكم تسمى "DemoController". سنقوم في هذه الوحدة بتعريف متغير يسمى "tutorialName"، وهذه المرة، بدلاً من إلحاقه بكائن النطاق، سنقوم بإلحاقه مباشرة بوحدة التحكم.
2. في توجيهنا المخصص، نذكر على وجه التحديد أننا نريد استخدام وحدة التحكم "DemoController" باستخدام الكلمة الأساسية لمعلمة وحدة التحكم.
3. نقوم بإنشاء مرجع إلى وحدة التحكم باستخدام المعامل "controllerAs". هذا مُعرّف بواسطة AngularJS وهو الطريقة المُثلى للإشارة إلى وحدة التحكم باستخدام اسم مستعار.
4. وأخيرًا، في قالبنا، نستخدم المرجع الذي تم إنشاؤه في الخطوة 3 ونستخدم متغير العضو الذي تم إرفاقه مباشرة بوحدة التحكم في الخطوة 1.

ملاحظة: يمكن الوصول إلى عدة وحدات تحكم في توجيه واحد عن طريق تحديد كتل وحدات التحكم المعنية، وعبارات controllerAs، وعبارات القوالب. للوصول إلى أصل استخدم وحدة تحكم التوجيه بدلاً من ذلك require.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

يُظهر الناتج بوضوح أن التوجيه المخصص يصل إلى وحدة التحكم DemoController ومتغير العضو tutorialName المرفق بها، ويعرض النص "Angular". كلا الطريقتين لا تزالان تقرأان من نطاق مشترك، وهو ما يمنعه النطاق المعزول.

كيف تختلف روابط @ و = و & و < في نطاق معزول؟

لا يمكن استخدام التوجيه الذي يشترك في نطاقه الأصلي إلا مرة واحدة لكل وحدة تحكم، لأن نسختين منه ستتنافسان على نفس المتغيرات. scope يقوم الكائن بإنشاء نطاق العزللا يرى هذا التوجيه أي شيء خارج نطاق الخصائص التي تحددها. يستخدم كل إدخال رمزًا بادئًا يوضح كيفية انتقال قيمته.

؟؟؟؟ تلميح: يصل الى < قبل =يُعدّ الربط أحادي الاتجاه أقل تكلفةً للمراقبة، ويمنع المكوّن من تغيير بيانات المتصل به دون علمه. يستخدم القسم التالي @.

توجيهات ومكونات AngularJS: ng-transclude

كما ذكرنا سابقاً، فإن AngularJS مصمم لتوسيع وظائف HTML. وقد رأينا بالفعل كيف يمكننا حقن التعليمات البرمجية باستخدام توجيهات مخصصة قابلة لإعادة الاستخدام.

لكن في تطوير تطبيقات الويب الحديثة، يوجد أيضًا مفهوم التطويرping مكونات الويب، والتي تعني أساسًا إنشاء علامات HTML الخاصة بنا والتي يمكن استخدامها كمكونات في التعليمات البرمجية الخاصة بنا.

وبالتالي، يوفر AngularJS مستوى آخر من القوة لتوسيع علامات HTML من خلال منح القدرة على تغليف أي ترميز يضعه المتصل داخل العلامة.

ويتم ذلك عن طريق "نانوغرام-ترجمة"التوجيه"، الذي يخبر AngularJS بالتقاط كل شيء يتم وضعه داخل العلامة المخصصة في الترميز وإسقاطه في القالب عند تلك النقطة.

لنأخذ مثالاً على كيفية تحقيق ذلك. توضح لقطة الشاشة النقاط الخمس التالية.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <pane title="{{title}}">Angular JS</pane>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('pane',function(){
        return {

            transclude:true,
            scope :{title:'@'},
            template: '<div style="border: 1px solid black;"> '+
                        '<ng-transclude></ng-transclude>'+
                            '</div>'
        };
    });

</script>

</body>
</html>

Code تفسير

1. نستخدم التوجيه لتعريف وسم HTML مخصص يُسمى "pane"، مع دالة مصنع تُزوّد ​​الكود الخاص به. في الناتج، يعرض وسم "pane" النص "Angular JS" داخل مستطيل ذي حدود سوداء متصلة.
2. يجب ضبط خاصية "transclude" على القيمة "true"، وهذا ما يُخبر AngularJS بالاحتفاظ بالترميز الداخلي الأصلي وجعله متاحًا لـ ng-transclude.
3. في كائن النطاق، نقوم بتعريف ربط العنوان. عادةً ما تُكتب السمات على شكل أزواج اسم/قيمة مثل name="value"في حالتنا، السمة الموجودة على علامة اللوحة هي "title"، ويطلب الرمز "@" من AngularJS نسخ تلك السمة كسلسلة مضمنة.
4. يقوم القالب برسم الحدود السوداء الصلبة للتحكم لدينا ويحدد المكان الذي يتم فيه إدراج العلامات المضمنة.
5. وأخيرًا، نقوم باستدعاء علامة HTML المخصصة الخاصة بنا مع سمة العنوان التي تم تعريفها.

⚠️ تصحيح: وصف النص الأصلي علامة "@" بأنها "شرط من Angular". إنها ليست مجرد إجراء شكلي: @ يُعدّ هذا الرمز أحد رموز الربط الأربعة ذات النطاق المعزول في الجدول أعلاه، ويُنتج دائمًا سلسلة نصية. كما أن هذا القالب لا يُعرض أبدًا. {{title}}ولا يوجد متحكم يحدد titleلذلك، لا يظهر سوى النص المضمن.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

• يُظهر الناتج عنصر اللوحة المخصص معروضًا كمربع ذي حدود يحتوي على النص المضمن "Angular JS".

يمكن أن يحتوي التوجيه أيضًا على توجيهات أخرى، وهذه هي الطريقة التي يتم بها تجميع المكونات الأكبر حجمًا.

التوجيهات المتداخلة

يمكن تداخل التوجيهات في AngularJS. مثل الوحدات أو الدوال الداخلية في أي لغة برمجة، قد تحتاج إلى تضمين التوجيهات داخل بعضها البعض.

يمكنك الحصول على فهم أفضل لهذا من خلال رؤية المثال أدناه.

في هذا المثال، قمنا بإنشاء توجيهين يسمى "الخارجي" و"الداخلي".

• يعرض التوجيه الداخلي نصًا يسمى "Inner".
• بينما يقوم التوجيه الخارجي في الواقع باستدعاء التوجيه الداخلي لعرض النص المسمى "Inner".

توضح لقطة الشاشة أدناه تعريفات التوجيهات والنقطة التي يستدعي فيها أحدهما الآخر.

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <outer></outer>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('outer',function(){
        return {

            restrict:'E',
            template: '<div><h1>Outer</h1><inner></inner></div>',
        }});

    app.directive('inner',function(){
        return {

            restrict:'E',
            template: '<div><h1>Inner</h1></div>',
        }
    });
</script>

</body>
</html>

⚠️ تحذير — تم الحفاظ على العيب في هذه القائمة: يبدأ الإعلان المنشور عند </head>، فاتها افتتاحها <!DOCTYPE html>, <html> و <head> أضف هذه الأسطر قبل تشغيل البرنامج.

Code تفسير

1. نحن نقوم بإنشاء توجيه يسمى "الخارجي" والذي سيكون بمثابة التوجيه الأصلي لدينا. سيقوم هذا التوجيه بعد ذلك باستدعاء التوجيه "الداخلي".
2. استخدم restrict:'E' يُخبر الخيار AngularJS بمطابقة كل توجيه بواسطة العنصر الاسم، ولهذا السبب يمكن كتابتها على شكل علامات <outer> و <inner>الحرف 'E' هو اختصار لكلمة 'Element'.
3. نقوم هنا بإنشاء التوجيه الداخلي الذي يعرض النص "Inner" في علامة div.
4. في قالب التوجيه الخارجي، نستدعي التوجيه الداخلي. لذا، هنا نقوم بحقن القالب من التوجيه الداخلي في التوجيه الخارجي.
5. وأخيرا، نحن ننادي مباشرة بالتوجيه الخارجي.

⚠️ تصحيح: النص الأصلي زعم restrict:'E' يُشترط "لضمان توفر البيانات من التوجيه الداخلي للتوجيه الخارجي". لكنه لا يفعل ذلك؛ فهو يتحكم فقط كيف يمكن كتابة توجيه. يعمل التداخل لأن المُصرّف يستمر في التصفح داخل القالب الذي أدرجه للتو. لمشاركة البيانات، استخدم require و controller.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

من الإخراج،

• يمكن ملاحظة أنه تم استدعاء كل من التوجيهات الخارجية والداخلية، ويتم عرض النص في كلا علامتي div.

إن عرض الترميز ليس سوى نصف ما يفعله التوجيه؛ أما النصف الآخر فهو التفاعل مع المستخدم.

معالجة الأحداث في التوجيه

الفعاليات يمكن معالجة عمليات مثل نقرات الماوس أو نقرات الأزرار من داخل التوجيهات نفسها. ويتم ذلك باستخدام دالة الربط. تسمح دالة الربط للتوجيه بربط نفسه بعناصر DOM في صفحة HTML.

بناء الجملة:

صيغة دالة الربط موضحة أدناه.

link: function ($scope, element, attrs)

تقبل دالة الربط عادةً ثلاثة معايير: النطاق، والعنصر المرتبط به التوجيه، وخصائص العنصر المستهدف. ويُضاف إليها معياران آخران، وهما وحدة التحكم المطلوبة ودالة التضمين، عند الحاجة.

مرحلة التجميع مقابل مرحلة الربط

يقوم AngularJS بمعالجة التوجيه في مرحلتين، ومعرفة أيهما هو أيهما يخبرك بمكان وجود التعليمات البرمجية الخاصة بك.

• جمع يتم تنفيذه مرة واحدة على عنصر القالب، قبل وجود أي نطاق. وهو مناسب للتعديلات الهيكلية المشتركة بين جميع النسخ.
• الرابط يتم تنفيذ هذا الإجراء مرة واحدة لكل نسخة، بعد استنساخ القالب وربط نطاق به. يتم استخدام مستمعي DOM وقراءة النطاق هنا.

لأن دالة compile ليس لها نطاق، فإن أي شيء يحتاج إلى بيانات ينتمي إلى دالة link، ولهذا السبب يُعرّف المثال أدناه link وحده.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك. تُظهر لقطة الشاشة النقاط الأربع أدناه.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru="">Click Me</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
</script>

</body>
</html>

Code تفسير

1. نحن نستخدم دالة الربط كما هو محدد في AngularJS لإعطاء التوجيه القدرة على الوصول إلى الأحداث في HTML DOM.
2. نستخدم الكلمة المفتاحية 'element' لأننا نريد الاستجابة لحدثٍ يخص عنصر DOM في HTML، وهو في حالتنا عنصر 'div'. ثم نستخدم الدالة 'bind' لإضافة وظائف مخصصة لحدث النقر على هذا العنصر. أما الكلمة المفتاحية 'click' فهي تُستخدم للدلالة على حدث النقر على أي عنصر تحكم في HTML.
3. هنا نقول أننا نريد استبدال HTML الداخلي للعنصر، في حالتنا عنصر div، بالنص "لقد نقرت علي".
4. نقوم هنا بتعريف علامة div الخاصة بنا لاستخدام التوجيه المخصص ng-guru.

؟؟؟؟ تلميح: يجب أن يقوم التوجيه بتنظيف نفسه بعد انتهاء صلاحيته. قم بإزالة أي مستمع يستمر بعد انتهاء صلاحية العنصر الموجود بداخله. element.on('$destroy', ...)أو أن الصفحة تُسرّب الذاكرة.

إذا تم تنفيذ الكود بنجاح، فستظهر هذه المخرجات.

الإخراج:

• في البداية، يظهر النص "انقر هنا" للمستخدم، لأنه النص المحدد داخل عنصر div. عند النقر على عنصر div، يظهر الناتج الموضح أدناه بدلاً من ذلك.

استخدم كل مثال مما سبق خاصية أو خاصيتين من نفس كائن التعريف. المجموعة الكاملة تستحق الحفظping في متناول اليد.

مرجع خصائص كائن تعريف التوجيه

الكائن الذي تُرجعه دالة إنشاء التوجيهات هو كائن تعريف التوجيهتجيب كل خاصية على سؤال واحد حول كيفية عمل التوجيه.

؟؟؟؟ تلميح: تبدأ restrict, template و link. إضافة scope لإعادة الاستخدام، controller و require لإجراء المكالمات بين الموجهين، ثم المغادرة priority و terminal وحده.

الأسئلة الشائعة