مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. بعد از ارائه مبحث پرکاربرد کار با بانک اطلاعاتی SQL در AngularJS در این آموزش این بخش که مطالب بسیار پر کاربرد و گسترده ای را در بر می گیرد ، قصد داریم به مباحث کار با Events در AngularJS یا رویدادها در AngularJS ، بپردازیم. تمام رویدادهای مهم از جمله کلیک کردن، دوبار کلیک، فشردن کلید کیبورد، رها کردن کلید کیبورد و … در AngularJS ، پشتیبانی می شود و متدهای آن از قبل آماده شده است.که در ادامه بررسی خواهیم کرد.
کار با Events یا رویدادها در AngularJS
شما می توانید متدهای AngularJS را به عناصر HTML خود، با استفاده از یک یا چند مورد از این دستورات، اضافه کنید:
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
دستورالعمل های رویداد به ما اجازه می دهد تا توابع AngularJS را در رویدادهای کاربر خاص، اجرا کنیم.
رویداد AngularJS یک رویداد HTML را بازنویسی نخواهد کرد، هر دو رویداد اجرا خواهند شد.
رویدادهای ماوس
رویدادهای ماوس زمانی رخ می دهد که مکان نمای ماوس در عناصر html عمل کند:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
و برای زمانی که عمل کلیک ماوس اتفاق بیفتد، شامل متدهای زیر است:
- ng-mousedown
- ng-mouseup
- ng-click
شما می توانید رویدادهای ماوس را به هر کدام از عناصر html اضافه کنید:
مثال :
| <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> |
شما همچنین می توانید در داخل یک تابع تعریف کنید:
مثال :
| <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> |
تعویض بین True/False
اگر می خواهید یک بخش از کد HTML را هنگامی که یک روی یک button کلیک می کنید نشان داده شود. و هنگامی که دوبار روی button کلیک می کنید، روی button زیر کلیک کنید تا نتیجه را مشاهده کنید، همچنین در ادامه کد این مثال را نیز قرار داده ایم:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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 که از نوع Boolean است. مقدار false را تعریف می کند.
تابع myFunc برعکس یک مقدار را در متغیر showMe با استفاده از کاراکتر ! (که همان not است) تعریف می کند.
آبجکت $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> |
کلام آخر
در مطالب آموزش این بخش، شما را با مباحث کامل کار با Events یا رویدادها در AngularJS ، آشنا کردیم. امیدواریم که آموزش فوق ، مورد توجه شما قرار گرفته و مفید بوده باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
