Angularjs kendi HTML olayları yönergesi yoktur.
angularjs Olaylar
Bu direktiflerin birini veya daha fazlasını kullanarak HTML öğelerine angularjs olay dinleyicileri 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 direktifleri belirli kullanıcı etkinliklerde angularjs fonksiyonlarını çalıştırmak için bize izin verir.
Bir HTML olayı üzerine yazmaz bir angularjs olay, her iki olay çalıştırılacaktır.
Fare Olaylar
İmleç bu sırada bir öğenin üzerine hareket ettiğinde Fare olaylar gerçekleşir:
- ng MouseEnter
- ng fare üzerinde
- ng mousemove
- ng mouseLeave
Ya da bir fare düğmesi bu sırada, bir elementin tıklandığında:
- ng mousedown
- ng mouseup
- ng tıklama
Herhangi bir HTML elemanı üzerinde fare etkinlik ekleyebilir.
Örnek
sayım değişkeni arttırın zaman H1 elemanı üzerine fare hamle:
<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> Kendin dene " ng tıklama Yönergesi
ng-click yönergesi eleman tıklandığında edilirken çalıştırılacaktır angularjs kodu 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> Kendin dene " Ayrıca bir işleve 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> Kendin dene " Geçiş, Doğru / Yanlış
Eğer düğme geçiş anahtarı gibi davranır yapmak, bir düğme tıklandığında HTML kodu bir bölümünü göstermek ve düğme açılır menü gibi tekrar tıklandığında gizlemek isterseniz:
Menü:
Örnek
<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> Kendin dene " showMe değişken Boolean değeri olarak başlar false .
myFunc işlevi ayarlar showMe kullanarak ne olduğunu tersi değişkeni ! (not) operatörü.
$ Olay nesnesi
Sen geçebilir $event işlevi çağrılırken bağımsız değişken olarak nesneyi.
$event nesnesi tarayıcının olay nesnesi 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>
Kendin dene "