أحداث AngularJS

يملك AngularJS تعليماته الخاصة للحوادث HTML.

أحداث AngularJS

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

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

تعليمات الحدث تسمح لنا بتنفيذ الدوال AngularJS على بعض أحداث المستخدمين.

أحداث AngularJS لا تغطي أحداث HTML، سيتم تنفيذ كلاهما.

أحداث الفأرة

عند تحريك المؤشر فوق العنصر، تحدث الأحداث التالية بالترتيب التالي:

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

أو، عند النقر على العنصر، يتم تنفيذ الأحداث التالية بالترتيب التالي:

• ng-mousedown
• ng-mouseup
• ng-click

يمكنك إضافة أحداث فأرة إلى أي عنصر HTML.

مثال

عند تحريك الفأرة فوق عنصر H1، يتم زيادة متغير count:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">انقر فوقي!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

جربها بنفسك

تعليمات ng-click

ng-click تعريف التعليمات البرمجية التي سيتم تنفيذها عند النقر على العنصر باستخدام AngularJS.

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">انقر هنا!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

جربها بنفسك

أيضاً يمكنك تمرير دالة:

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">انقر هنا!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

جربها بنفسك

تبديل، صحيح/خطأ

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

مثال

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">انقر هنا!</button>  
<div ng-show="showMe">  
  <h1>القائمة:</h1>  
  <div>البيتزا</div>  
  <div>اللحوم المعسولة</div>  
  <div>الأسماك</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

جربها بنفسك

showMe يبدأ المتغير كقيمة بولية. false.

myFunc الدالة باستخدام !عامل (غير) حسابي، يقوم بتحويل showMe قيمة المتغير كعكس قيمته الحالية.

$event

يمكنك تحديد $event العدد كمعامل يتم تمريره.

$event المعادلة تحتوي على معادلة أحداث المتصفح:}}

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">انقر فوقي هنا!</h1>
<p>المواضيع: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

جربها بنفسك