التوجيهات المخصصة في AngularJS: كيفية الإنشاء؟ [أمثلة]

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

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

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

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

سيقوم التوجيه المخصص في حالتنا ببساطة بإدخال علامة div التي تحتوي على النص "AngularJS 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>

شرح الكود

نحن نقوم أولاً بإنشاء ملف وحدة لتطبيقنا الزاوي. يعد هذا مطلوبًا لإنشاء توجيه مخصص لأنه سيتم إنشاء التوجيه باستخدام هذه الوحدة.
نقوم الآن بإنشاء توجيه مخصص يسمى "ngGuru" وتحديد وظيفة سيكون لها رمز مخصص لتوجيهنا.ملاحظة:- لاحظ أنه عند تعريف التوجيه، قمنا بتعريفه على أنه ngGuru مع الحرف 'G' كحرف كبير. وعندما نصل إليه من علامة div الخاصة بنا كتوجيه، فإننا نصل إليه على أنه ng-guru. هذه هي الطريقة التي يفهم بها Angular التوجيهات المخصصة المحددة في التطبيق. أولاً، يجب أن يبدأ اسم التوجيه المخصص بالأحرف 'ng'. ثانيًا، يجب ذكر رمز الواصلة '-' فقط عند استدعاء التوجيه. وثالثًا، يمكن أن يكون الحرف الأول الذي يلي الأحرف 'ng' عند تعريف التوجيه إما صغيرًا أو كبيرًا.
نحن نستخدم معلمة القالب وهي المعلمة المحددة بواسطة Angular للتوجيهات المخصصة. في هذا، نحدد أنه كلما تم استخدام هذا التوجيه، فما عليك سوى استخدام قيمة القالب وإدخاله في رمز الاستدعاء.
نحن هنا الآن نستفيد من توجيهنا "ng-guru" الذي تم إنشاؤه خصيصًا. عندما نفعل ذلك، القيمة التي حددناها لقالبنا " البرنامج التعليمي الزاوي JS "سيتم الآن حقنها هنا.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

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

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

يتم تعريف النطاق على أنه الغراء الذي يربط وحدة التحكم بالعرض عن طريق إدارة البيانات بين العرض ووحدة التحكم.

عند إنشاء توجيهات 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>

شرح الكود

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

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

يوضح الناتج أعلاه بوضوح أن التوجيه المخصص لدينا "ng-guru" يستخدم متغير النطاق TutorialName في وحدة التحكم الرئيسية.

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

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

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

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

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

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

<!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>

شرح الكود

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

ملحوظة: -من الممكن الوصول إلى وحدات تحكم متعددة في التوجيه عن طريق تحديد الكتل الخاصة بوحدة التحكم ووحدات التحكم وبيانات القالب.

أخيرًا، في قالبنا، نستخدم المرجع الذي تم إنشاؤه في الخطوة 3 ونستخدم متغير العضو الذي تم إرفاقه مباشرة بوحدة التحكم في الخطوة 1.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

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

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

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

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

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

والآن، بدلًا من إدخال نفس الكود للشاشة أدناه في كل مرة، يمكننا فعليًا تضمين هذا الكود في توجيه وتضمين هذا التوجيه في أي وقت.

دعونا نرى مثالا لكيفية تحقيق ذلك.

<!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>

شرح الكود

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

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

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

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

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

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

ومن ثم يوفر angular مستوى آخر من القوة لتوسيع علامات HTML من خلال إعطاء القدرة على إدخال السمات في علامات HTML نفسها.

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

لنأخذ مثالاً لكيفية تحقيق ذلك.

<!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>

شرح الكود

نحن نستخدم التوجيه لتحديد علامة HTML مخصصة تسمى "الجزء" وإضافة وظيفة ستضع بعض التعليمات البرمجية المخصصة لهذه العلامة. في المخرجات، ستعرض علامة الجزء المخصصة لدينا النص "AngularJS" في مستطيل ذو حدود سوداء صلبة.
يجب ذكر السمة "transclude" على أنها صحيحة، وهي مطلوبة بواسطة angular لإدخال هذه العلامة في DOM الخاص بنا.
في النطاق، نقوم بتعريف سمة العنوان. يتم تعريف السمات عادةً على أنها أزواج اسم/قيمة مثل: name=”value”. في حالتنا، اسم السمة في علامة HTML للجزء الخاص بنا هو "العنوان". الرمز "@" هو المطلب الزاوي. ويتم ذلك بحيث أنه عند تنفيذ السطر title={{title}} في الخطوة 5، تتم إضافة التعليمات البرمجية المخصصة لسمة العنوان إلى علامة HTML للجزء.
الكود المخصص لسمات العنوان الذي يرسم حدودًا سوداء صلبة لسيطرتنا.
أخيرًا، نقوم باستدعاء علامة HTML المخصصة الخاصة بنا مع سمة العنوان التي تم تعريفها.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

يُظهر الإخراج بوضوح أنه تم تعيين سمة العنوان لعلامة html5 للجزء على القيمة المخصصة لـ "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>

شرح الكود

نحن نقوم بإنشاء توجيه يسمى "الخارجي" والذي سيكون بمثابة التوجيه الأصلي لدينا. سيقوم هذا التوجيه بعد ذلك باستدعاء التوجيه "الداخلي".
التقييد: 'E' مطلوب بواسطة angular للتأكد من أن البيانات من التوجيه الداخلي متاحة للتوجيه الخارجي. الحرف "E" هو الشكل المختصر لكلمة "العنصر".
نقوم هنا بإنشاء التوجيه الداخلي الذي يعرض النص "Inner" في علامة div.
في قالب التوجيه الخارجي (الخطوة رقم 4)، نحن نسمي التوجيه الداخلي. لذا، فإننا هنا نقوم بإدخال القالب من التوجيه الداخلي إلى التوجيه الخارجي.
وأخيرا، نحن ننادي مباشرة بالتوجيه الخارجي.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

من الإخراج،

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

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

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

بناء الجملة:

بناء جملة عنصر الارتباط كما هو موضح أدناه

نانوغرام تكرار

link: function ($scope, element, attrs)

تقبل وظيفة الارتباط عادةً 3 معلمات بما في ذلك النطاق والعنصر الذي يرتبط به التوجيه وسمات العنصر الهدف.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

<!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>

شرح الكود

نحن نستخدم وظيفة الرابط كما هو محدد في الزاوي لإعطاء قدرة التوجيهات على الوصول إلى الأحداث في HTML DOM.
نحن نستخدم الكلمة الأساسية "element" لأننا نريد الاستجابة لحدث لعنصر HTML DOM، والذي سيكون في حالتنا هو العنصر "div". نستخدم بعد ذلك وظيفة "الربط" ونقول إننا نريد إضافة وظيفة مخصصة إلى حدث النقر الخاص بالعنصر. كلمة "النقر" هي الكلمة الأساسية، والتي يتم استخدامها للإشارة إلى حدث النقر لأي عنصر تحكم HTML. على سبيل المثال، يحتوي عنصر تحكم زر HTML على حدث النقر. نظرًا لأننا، في مثالنا، نريد إضافة رمز مخصص إلى حدث النقر لعلامة "dev" الخاصة بنا، فإننا نستخدم الكلمة الأساسية "click".
نقول هنا أننا نريد استبدال HTML الداخلي للعنصر (في حالتنا عنصر div) بالنص "لقد نقرت فوقي!".
نقوم هنا بتعريف علامة div الخاصة بنا لاستخدام التوجيه المخصص ng-guru.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

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

ملخص

يمكن للمرء أيضًا إنشاء توجيه مخصص يمكن استخدامه لإدخال التعليمات البرمجية في التطبيق الزاوي الرئيسي.
يمكن إجراء توجيهات مخصصة لاستدعاء الأعضاء المحددين في كائن النطاق في وحدة تحكم معينة باستخدام الكلمات الأساسية "Controller" و"controllerAs" و"template".
يمكن أيضًا أن تكون التوجيهات متداخلة لتوفير الوظائف المضمنة التي قد تكون مطلوبة اعتمادًا على حاجة التطبيق.
يمكن أيضًا جعل التوجيهات قابلة لإعادة الاستخدام بحيث يمكن استخدامها لإدخال التعليمات البرمجية المشتركة التي قد تكون مطلوبة عبر تطبيقات الويب المختلفة.
يمكن أيضًا استخدام التوجيهات لإنشاء علامات HTML مخصصة والتي سيكون لها وظائفها الخاصة المحددة وفقًا لمتطلبات العمل.
يمكن أيضًا التعامل مع الأحداث من داخل التوجيهات للتعامل مع أحداث DOM مثل نقرات الزر والماوس.

التوجيهات المخصصة في AngularJS: كيفية الإنشاء؟ [أمثلة]

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

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

ملخص

تلخيص هذه التدوينة بـ:

اشترك في النشرة الإخبارية

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

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

شرح الكود

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

شرح الكود

ذات المواد

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

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

شرح الكود

ملخص

تلخيص هذه التدوينة بـ:

اشترك في النشرة الإخبارية