رویدادها (Events)

در AngularJS، «رویداد (Event)» یعنی عمل کاربر؛ مثل کلیک یا حرکت ماوس. «دیرکتیو (Directive)» دستور HTML مخصوص انگولار است. با این ها رفتارها را به تگ ها وصل می کنیم؛ ساده و تمیز، مثل اتصال دکمه بازی به عملی مشخص.

دیرکتیوهای رویداد در AngularJS

با این دیرکتیوها شنونده رویداد اضافه کن؛ مثل گوش دادن به زنگ مدرسه.

• 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

نکته: رویداد انگولار، رویداد HTML را حذف نمی کند. هر دو اجرا می شوند.

رویدادهای ماوس: ترتیب و یک مثال

حرکت ماوس ترتیب دارد: mouseover، سپس mouseenter، بعد mousemove، و در پایان mouseleave. برای کلیک نیز mousedown، سپس mouseup، و بعد click.

<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: شمارش با هر کلیک

«ng-click» کد را هنگام کلیک اجرا می کند. هر کلیک مثل جمع کردن امتیاز در بازی است.

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

مشاهده در ادیتور

فراخوانی تابع با ng-click

می توانی به جای عبارت، تابع صدا بزنی. کدت مرتب تر می شود.

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

مشاهده در ادیتور

Toggle: نمایش و مخفی سازی با دکمه

گاهی می خواهی منو باز و بسته شود. با «ng-show» و یک متغیر بولی اینکار ساده است.

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

مشاهده در ادیتور

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

مشاهده در ادیتور

گام های عملی

1. یک ماژول و کنترلر بساز.
2. متغیرها را در $scope مقداردهی کن.
3. دیرکتیو رویداد را به تگ اضافه کن.
4. تابع ها را کوتاه و خوانا بنویس.

جمع بندی سریع

• رویدادها با دیرکتیوها وصل می شوند.
• ng-click برای کلیک ها عالی است.
• Toggle با یک بولی ساده می شود.
• $event جزئیات دقیق می دهد.