AngularJS ng-click، ng-show & ng-hide التوجيهات

أحداث AngularJS

أحداث AngularJS هي الوظائف التي تسمح لتطبيقات الويب بالتفاعل مع مدخلات المستخدم مثل نقرات الماوس، وإدخال لوحة المفاتيح، وتحريك مؤشر الماوس. يجب معالجة الأحداث في تطبيقات الويب لتنفيذ مهام وإجراءات محددة، ويتم تشغيل كل حدث عندما يقوم المستخدم بالإجراء المطابق.

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

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

⚠️ إشعار الدعم: وصل AngularJS نهاية الحياة في 31 ديسمبر 2021 ولا يتلقى أي تحديثات أو إصلاحات أمنية إضافية من فريق Angular. تظل التوجيهات أدناه دقيقة لصيانة تطبيقات AngularJS 1.x الحالية؛ أما بالنسبة للمشاريع الجديدة، فيُرجى استخدام الإصدارات الحديثة. زاويحيث يتم استبدال هذه التوجيهات بروابط الأحداث مثل (click) و *ngIf.

ما هو التوجيه ng-click في AngularJS؟

استخدم "توجيه النقر فوق ng" في AngularJS، يتم تطبيق سلوك مخصص عند النقر على عنصر HTML. ويُستخدم عادةً مع الأزرار، لأنها أكثر الأماكن شيوعًا لإضافة استجابات النقر، كما يُستخدم أيضًا لإصدار تنبيهات عند النقر.

بناء جملة النقر ng في AngularJS

<element
 ng-click="expression">
</element>

مثال على النقر على ng في AngularJS

في هذا المثال الخاص بـ ng-click، يتم زيادة متغير العداد في كل مرة ينقر فيها المستخدم على زر.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code التفسير:

1. يقوم توجيه ng-init بتعيين المتغير المحلي count ل0.
2. يزيد توجيه ng-click على الزر count بزيادة قدرها 1 في كل نقرة.
3. الاستيفاء {{count}} يعرض القيمة الحالية للمستخدم.

الإخراج:

يظهر زر "زيادة" ويكون العدد في البداية صفرًا. يؤدي النقر عليه إلى زيادة القيمة، كما هو موضح في الصورة أدناه.

ما هو توجيه ng-show في AngularJS؟

استخدم توجيه ng-show يُظهر أو يُخفي شيئًا معينًا HTML يتم تحديد العنصر بناءً على التعبير المُمرر إلى السمة ng-show. داخليًا، يتم إظهار العنصر أو إخفاؤه عن طريق إزالة أو إضافة .ng-hide فئة CSS، وهي فئة مُعرَّفة مسبقًا تُحدِّد display إلى none.

بناء جملة ng-show في AngularJS

<element
 ng-show="expression">
</element>

مثال على ng-show في AngularJS

يستخدم هذا المثال ng-show لإظهار عنصر مخفي.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

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

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code التفسير:

1. يشير توجيه ng-click الموجود على الزر إلى ShowHide الدالة المحددة في وحدة التحكم DemoController.
2. تُضاف السمة ng-show إلى عنصر div الذي يحتوي على النص Angular. هذا هو العنصر الذي يتم التحكم في رؤيته.
3. في وحدة التحكم، IsVisible يتم وضع متغير العضو في كائن النطاق وتهيئته إلى falseلذلك، يتم إخفاء العنصر div عند تحميل الصفحة لأول مرة. مع ng-show، تكون قيمة صحيح يعرض العنصر و زائف يخفيه.
4. استخدم ShowHide مجموعات الوظائف IsVisible اجعل القيمة صحيحة حتى يصبح العنصر div مرئيًا.

الإخراج:

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

ما هو توجيه ng-hide في AngularJS؟

استخدم نانوغرام إخفاء التوجيه يخفي العنصر عندما تكون قيمة تعبيره صحيحة (TRUE)، ويُظهره عندما تكون قيمة التعبير خاطئة (FALSE) - وهو عكس وظيفة ng-show تمامًا. ويستخدم داخليًا نفس .ng-hide فئة CSS.

بناء جملة ng-hide في AngularJS

<element
 ng-hide="expression">
</element>

مثال على ng-hide في AngularJS

هذا المثال يعكس مثال ng-show بحيث يمكن مقارنة التوجيهين بشكل مباشر.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

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

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code التفسير:

1. يشير توجيه ng-click الموجود على الزر إلى ShowHide وظيفة في DemoController.
2. استخدم ng-hide تم إرفاق السمة بالعنصر div الذي يحتوي على النص Angular.
3. IsVisible يتم تهيئته إلى falseلأن هذا العنصر يستخدم ng-hide وليس ng-show، فإن القيمة false تعني أن العنصر div غير موجود. مرئي عند تحميل الصفحة لأول مرة.
4. استخدم ShowHide مجموعات الوظائف IsVisible إلى صحيح، مما يخفي العنصر div.

الإخراج:

يظهر العنصر div مبدئيًا لأن القيمة false مُمررة إلى ng-hide. النقر إخفاء الزاوية إذا تحقق الشرط، تختفي الكلمة.

ng-show vs ng-hide vs ng-if: الاختلافات الرئيسية

تتحكم ثلاثة توجيهات في ظهور عنصر ما للمستخدم، ويؤثر اختيار أحدها على كلٍ من سلوك الصفحة وأداء العرض. التوجيهان الأولان يُبدّلان فقط فئة CSS، لذا يظل العنصر موجودًا دائمًا في الصفحة؛ أما التوجيه الثالث فيضيف العنصر نفسه أو يُزيله.

استخدم ng-show أو ng-hide عندما يتغير وضع عنصر ما بشكل متكرر، لأن العنصر لا يُعاد بناؤه أبدًا، ولا يتطلب التغيير سوى تغيير الفئة. استخدم ng-if للأقسام المكلفة التي تُعرض نادرًا، لأن إزالة العنصر تُزيل أيضًا مراقبيه، مما يقلل من تكلفة التحديث في كل دورة.

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

يمكنك إضافة مستمعي أحداث AngularJS إلى عناصر HTML باستخدام واحد أو أكثر من هذه الأدوات. توجيهات:

• نانوغرام-طمس
• نانوغرام التغيير
• نانوغرام انقر
• نانوغرام نسخة
• قطع نانوغرام
• ng-dblclick
• نانوغرام التركيز
• ng-keydown
• ng-الضغط على المفاتيح
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• لصق نانوغرام
• نانوغرام-إرسال

يقبل كل توجيه تعبيرًا، ويكون حدث المتصفح الخام متاحًا بداخله كـ $event عندما يحتاج المعالج إلى تفاصيل مثل المفتاح المضغوط أو إحداثيات النقر.

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