AngularJS tapahtumat

AngularJS käyttää omia HTML-tapahtumakomentojaan.

AngularJS tapahtumat

Voit lisätä AngularJS tapahtumankuuntelijoita HTML-elementteihisi käyttämällä seuraavaa yhtä tai useampaa ohjetta:

  • 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

Tapahtumakomento sallii AngularJS-funktioiden suorittamisen tietyillä käyttäjä tapahtumilla.

AngularJS-tapahtumat eivät korvaa HTML-tapahtumia, molemmat tapahtumat suoritetaan.

Hiiren tapahtumat

Kun osoitin siirtyy elementin päälle, tapahtumat tapahtuvat seuraavassa järjestyksessä:

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

Tai, kun elementtiä klikataan hiirellä, tapahtumat laukeavat seuraavassa järjestyksessä:

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

Voit lisätä hiiren tapahtumia mihin tahansa HTML-elementtiin.

Esimerkki

Lisää count-muuttuja, kun hiiren osoitin siirtyy H1-elementin päälle:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Move the mouse over me!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Kokeile itse!

ng-click ohje

ng-click Ohjeet määrittelevät AngularJS-koodin suorittamisen, kun elementti klikataan.

Esimerkki

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

Kokeile itse!

Voit myös viitata funktioon:

Esimerkki

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

Kokeile itse!

Vaihto, totta/väärää

Jos haluat näyttää osan HTML-koodia klikattuna napin painalluksella ja piilottaa sen uudelleen klikkaamisen jälkeen, kuten pudotusvalikossa, tee napista vaihtokäyttöinen:

Click me

Esimerkki

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

Kokeile itse!

showMe Muuttuja alkaa boolean-arvona false.

myFunc Funktion kutsuessa voidaan !Laskennan (ei) operaattori, joka showMe muuttujan arvo asetetaan sen nykyisen arvon vastakkaiseksi.

$event-objekti

Funktion kutsuessa voidaan $event Objekti siirretään parametrina.

$event Olio sisältää selaimen tapahtumao对象的对象：

Esimerkki

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Kuunteli hiiren siirtymistä ylös!</h1>
<p> Koordinaatit: {{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>

Kokeile itse!