أحداث 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-mousemove
نانوغرام الفئران

أو عند النقر فوق أحد عناصر الماوس ، بهذا الترتيب:

من الفأرة
من الفأرة
من فوق

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

مثال

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

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

انقر فوق التوجيه

يحدد ng-click التوجيه كود AngularJS الذي سيتم تنفيذه عند النقر على العنصر.

مثال

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</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()">Click me!</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()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</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)">Mouse Over Me!</h1>

<p>Coordinates: {{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>

❮ سابق التالي ❯

درس تعليمي

أمثلة

المرجعي

أحداث AngularJS