AngularJS Olay

AngularJS kendi HTML olay talimatlarına sahiptir.

AngularJS Olay

Aşağıdaki bir veya daha fazla talimatı kullanarak AngularJS olay dinleyicisini HTML elementinize 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 talimatları, AngularJS işlevlerini belirli kullanıcı olaylarında çalıştırmamıza olanak tanır.

AngularJS olayları HTML olaylarını geçmez, iki olay da çalışır.}

Fare olayları

Fare, elemente taşındığında aşağıdaki sırayla fare olayları meydana gelir:

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

veya, element tıklanırken aşağıdaki sırayla tetiklenir:

  • ng-mousedown
  • ng-mouseup
  • ng-click

Herhangi bir HTML elementine fare olayı ekleyebilirsiniz.

Örnek

Fare, H1 elementine taşındığında count değişkeni artırılır:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Fareyi Bana Üzerine Taşı!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Kendi Kendine Deney

ng-click düzenlemesi

ng-click Düzenleme, AngularJS kodunu element tıklanırken çalıştırır.

Örnek

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Bana Tıkla!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Kendi Kendine Deney

Ayrıca bir fonksiyon da alabilirsiniz:

Örnek

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Bana Tıkla!</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>

Kendi Kendine Deney

Değiştir, Doğru/Yanlış

Eğer tıklama butonuna tıkladığınızda bir kısmı HTML kodunu göstermek ve tekrar tıkladığınızda gizlemek istiyorsanız, butonu açma/kapama düğmesi gibi davranmasını sağlayın:

Bana Tıkla

Örnek

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Bana Tıkla!</button>  
<div ng-show="showMe">  
  <h1>Menü：</h1>  
  <div>Pizza</div>  
  <div>Spaghetti</div>  
  <div>Deniz Ürünleri</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>

Kendi Kendine Deney

showMe değişken başlangıçta bir boolean değerdir false.

myFunc fonksiyonu !işletme (işlemci) operatörü, showMe değişken, mevcut değerin tam tersi olan değere ayarlanabilir.

$event nesnesi

Fonksiyon çağrılırken $event Nesne parametre olarak iletilir.

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

Örnek

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)"> Fareyi Üzerime Getirin!</h1>
<p> Koordinatlar: {{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>

Kendi Kendine Deney