AngularJS Events

❮ Vorige Volgende ❯

AngularJS het sy eie HTML-gebeure-aanwysings.

AngularJS Events

Jy kan AngularJS-gebeurtenisluisteraars by jou HTML-elemente voeg deur een of meer van hierdie riglyne te gebruik:

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

Die gebeurtenis-aanwysings stel ons in staat om AngularJS-funksies by sekere gebruikergebeurtenisse uit te voer.

'n AngularJS-gebeurtenis sal nie 'n HTML-gebeurtenis oorskryf nie, beide gebeurtenisse sal uitgevoer word.

Muis Gebeurtenisse

Muisgebeurtenisse vind plaas wanneer die wyser oor 'n element beweeg, in hierdie volgorde:

van muisoor
van-muisinvoer
ng-muis beweeg
ng-muisblad

Of wanneer 'n muisknoppie op 'n element geklik word, in hierdie volgorde:

van die muis af
van-muis-op
van klik

Jy kan muisgebeurtenisse op enige HTML-element byvoeg.

Voorbeeld

Verhoog die telveranderlike wanneer die muis oor die H1-element beweeg:

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

Die klik Richtlijn

Die ng-click richtlijn definieer AngularJS-kode wat uitgevoer sal word wanneer die element geklik word.

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>

Jy kan ook verwys na 'n funksie:

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>

Wissel, Waar/Onwaar

As jy 'n gedeelte van HTML-kode wil wys wanneer 'n knoppie geklik word, en wegsteek wanneer die knoppie weer geklik word, soos 'n aftrekkieslys, laat die knoppie soos 'n wisselskakelaar optree:

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

Die showMeveranderlike begin as die Boole-waarde false.

Die myFuncfunksie stel die showMeveranderlike in die teenoorgestelde van wat dit is, deur die !(nie) operateur te gebruik.

$event Voorwerp

Jy kan die $eventvoorwerp as 'n argument deurgee wanneer jy die funksie oproep.

Die $eventobjek bevat die blaaier se gebeurtenisobjek:

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>

❮ Vorige Volgende ❯

Tutoriaal

Voorbeelde

Verwysing

AngularJS Events