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 كلا الحدثين.
أحداث الماوس
تحدث أحداث الماوس عندما يتحرك المؤشر فوق عنصر، في هذا النظام:
- نانوغرام mouseenter
- نانوغرام مرر الفأرة فوق
- نانوغرام mousemove
- نانوغرام mouseleave
أو عند النقر على زر الماوس على عنصر، في هذا النظام:
- نانوغرام mousedown
- نانوغرام mouseup
- نانوغرام النقر
يمكنك إضافة أحداث الماوس على أي عنصر 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 يحتوي الكائن كائن حدث المتصفح:
مثال
<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>
انها محاولة لنفسك »