AngularJS Olayları

❮ Öncesi Sonraki ❯

AngularJS'nin kendi HTML olay yönergeleri vardır.

AngularJS Olayları

AngularJS olay dinleyicilerini şu yönergelerden birini veya birkaçını kullanarak HTML öğelerinize ekleyebilirsiniz:

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

Olay yönergeleri, belirli kullanıcı olaylarında AngularJS işlevlerini çalıştırmamıza izin verir.

Bir AngularJS olayı, bir HTML olayının üzerine yazmaz, her iki olay da yürütülür.

Fare Olayları

Fare olayları, imleç şu sırayla bir öğenin üzerine geldiğinde gerçekleşir:

fareyle üzerine gelindiğinde
fare kullanıcısı
ng-mousemove
ng-mouseleave

Veya bir öğe üzerinde fare düğmesi tıklandığında, bu sırayla:

fare aşağı
fare üstü
tıklama

Herhangi bir HTML öğesine fare olayları ekleyebilirsiniz.

Örnek

Fare H1 öğesinin üzerine geldiğinde sayı değişkenini artırın:

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

tıklama Yönergesi

Yönerge ng-click , eleman tıklandığında yürütülecek AngularJS kodunu tanımlar.

Örnek

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

Ayrıca bir işleve de başvurabilirsiniz:

Örnek

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

Geçiş, Doğru/Yanlış

Bir düğme tıklandığında HTML kodunun bir bölümünü göstermek ve düğme tekrar tıklandığında, açılır menü gibi gizlemek istiyorsanız, düğmenin bir geçiş anahtarı gibi davranmasını sağlayın:

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

Değişken showMeBoole değeri olarak başlar false.

İşlev , (değil) operatörünü kullanarak değişkeni ne olduğunun tam tersine myFuncayarlar .showMe!

$event Nesnesi

$eventİşlevi çağırırken nesneyi argüman olarak iletebilirsiniz .

Nesne $event, tarayıcının olay nesnesini içerir:

Örnek

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

❮ Öncesi Sonraki ❯

öğretici

Örnekler

Referans

AngularJS Olayları