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

در انگولار دستورالعمل های مخصوصی جهت کار با رویدادهای وجود دارد که به استفاده از آنها می توانید تعامل کاربر با صفحه را افزایش دهید.

لیست رویدادها

لیست رویدادهای در انگولار به شرح زیر می باشند:

  • 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 نمی باشند بلکه در کنار آنها و بصورت همزمان کار می کنند.

رویدادهای ماوس

این رویدادها با انجام عملیات مختلف توسط ماوس اتفاق می افتند:

  • ng-mouseover: حرکت ماوس از روی عنصر
  • ng-mouseenter: وارد شدن ماوس به ناحیه مورد نظر
  • ng-mousemove: حرکت ماوس
  • ng-mouseleave : خروج ماوس از ناحیه مورد نظر
  • ng-mousedown: فشردن دکمه سمت چپ ماوس
  • ng-mouseup: رها کردن دکمه سمت چپ ماوس
  • ng-click: انجام عملیات کلیک

مدیریت عملیات کلیک

در صورتیکه قصد داشته باشید هنگام کلیک بر روی عنصری، دستورات مورد نظر اجرا شود می توانید از ng-click استفاده نمایید. برای مثال قصد داریم دو دکمه طراحی کنیم که با کلیک بر روی آنها بتوان تعداد محصولات سفارش داده شده را کاهش یا افزایش داد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <button ng-click="count = count - 1">-</button>

      <p>{{ count }}</p>
      <button ng-click="count = count + 1">+</button>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.count = 0;
      });
    </script>
  </body>
</html>

در این مثال، متغیر count هنگام اجرای صفحه با عدد صفر مقدار دهی می شود که با کلیک روی دکمه اول یک واحد از آن کم شده و با کلیک روی دکمه دوم، یک واحد به آن اضافه می شود.

علاوه بر روش فوق می توان هنگام رخ دادن رویداد کلیک، یک function حاوی دستورالعمل ها نیز فراخوانی کرد. برای مثال اگر قصد داشته باشید با کلیک روی یک دکمه اطلاعاتی نمایش داده شده یا مخفی شود، به روش زیر نیز می توان عمل کرد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <button ng-click="myFunc()">Toggle</button>

      <p ng-show="showItem">This is Toggle Text</p>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.showItem = false;
        $scope.myFunc = function () {
          $scope.showItem = !$scope.showItem;
        };
      });
    </script>
  </body>
</html>

با اجرای دستورات فوق مشاهده خواهید نمود که با یک بار کلیک کردن روی دکمه، متن نمایش داده می شود و با تکرار این عمل، متن مجددا مخفی می شود. به عبارتی دیگر با هر بار کلیک، وضعیت نمایش متن معکوس می شود.