گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/05/28 - 15:36
كد :7792

چگونه رخدادهایی مانند کلیک را در آنگولار مدیریت کنیم

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

آموزش طراحی سایت با آنگولار

آنگولارجی اس رخداد های مختص به خود را دارا می باشد.

رخدادهای آنگولارجی اس

شما میتوانید شنونده رخدادهای آنگولار را به تگ های 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

متاسفانه در این آموزش امکان آموزش همه این دستورالعمل ها وجود ندارد.

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

یک رخداد آنگولار ، رویداد موجود در HTML را بازنویسی نمی کند و به این ترتیب هر دو رویداد قابل اجرا شدن هستند.

رخدادهای موس

رخدادهای موس هنگامی رخ میدهد که موس روی یک تگ حرکت کند این رخدادها شامل :

ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave

رخداد های کلیک موس هم عبارتند از :

ng-mousedown
ng-mouseup
ng-click

شما میتوانید این رخداد ها را به هر تگی اعمال کنید.

مثال

افزایش تعداد برای متغییر شمارشگر هنگامیکه موس روی عبارت 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

دستور العمل 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>

مشاهده نتیجه

 

شما همچنین میتوانید این عملیات را از طریق function انجام دهید:

مثال:

<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 پنهان و با کلیک دوباره آشکار شود از کلید Toggle استفاده کنید.

مثال:

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

مشاهده نتیجه

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :