AngularJS-evenementen

AngularJS heeft zijn eigen HTML-gebeurtenissenrichtlijnen.

AngularJS-evenementen

U kunt AngularJS-gebeurtenislisteners aan uw HTML-elementen toevoegen door een of meer van deze richtlijnen te gebruiken:

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

De gebeurtenisrichtlijnen stellen ons in staat om AngularJS-functies uit te voeren bij bepaalde gebruikersgebeurtenissen.

Een AngularJS-event zal een HTML-event niet overschrijven, beide events worden uitgevoerd.

Muisgebeurtenissen

Muisgebeurtenissen vinden plaats wanneer de cursor over een element beweegt, in deze volgorde:

van mouseover
van-muis-enter
ng-mousemove
ng-muisblad

Of wanneer er met een muisknop op een element wordt geklikt, in deze volgorde:

van-muis naar beneden
van-muis omhoog
van klik

U kunt muisgebeurtenissen toevoegen aan elk HTML-element.

Voorbeeld

Verhoog de count-variabele wanneer de muis over het H1-element beweegt:

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

De klikrichtlijn

De ng-click richtlijn definieert AngularJS-code die wordt uitgevoerd wanneer op het element wordt geklikt.

Voorbeeld

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

U kunt ook naar een functie verwijzen:

Voorbeeld

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

Wisselen, Waar/Onwaar

Als u een gedeelte van de HTML-code wilt weergeven wanneer er op een knop wordt geklikt, en verbergen wanneer er opnieuw op de knop wordt geklikt, zoals een vervolgkeuzemenu, laat de knop zich dan als een tuimelschakelaar gedragen:

<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 showMevariabele begint als de Booleaanse waarde false.

De myFuncfunctie stelt de showMevariabele in op het tegenovergestelde van wat het is, door de !(not) operator te gebruiken.

$event Object

U kunt het $eventobject als argument doorgeven bij het aanroepen van de functie.

Het $eventobject bevat het gebeurtenisobject van de browser:

Voorbeeld

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

❮ Vorig Volgende ❯

zelfstudie

Voorbeelden

Referentie

AngularJS-evenementen