AngularJS händelser

AngularJS har egna HTML-händelsesinstruktioner.

AngularJS händelser

Du kan lägga till AngularJS-evenemangshörläggare till dina HTML-element genom att använda en eller flera av följande instruktioner:

  • 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

Evenhändighetsinstruktioner tillåter oss att köra AngularJS-funktioner vid vissa användarevenemang.

AngularJS-händelser överskriver inte HTML-händelser, båda händelserna körs.

Musehändelser

När markören flyttas över ett element, inträffar musehändelser i följande ordning:

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

Eller, när du klickar på ett element, aktiveras de i följande ordning:

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

Du kan lägga till musehändelser på alla HTML-element.

Exempel

Öka variabeln count när muspekaren flyttas över H1-elementet:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Flytta muspekaren över mig!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Prova själv

ng-click-instruktionen

ng-click En direktiv definierar AngularJS-kod som ska köras när ett element klickas.

Exempel

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

Prova själv

Du kan också hänvisa till en funktion:

Exempel

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Klicka mig!</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>

Prova själv

Växling, sant/falskt

Om du vill visa en del HTML-kod när du klickar på knappen och dölja den igen när du klickar på knappen en andra gång, precis som en rullgardin, gör knappen som en växlingsswitch:

Klicka mig

Exempel

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Klicka mig!</button>  
<div ng-show="showMe">  
  <h1>Meny:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Fisk</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>

Prova själv

showMe variabeln börjar som ett booleskt värde false.

myFunc en funktion genom att använda !operatorn (icke-)operator, som showMe sätta variabeln till dess motsatta värde.

$event-objektet

När du anropar en funktion kan du $event Objektet som skickas som parameter.

$event Objektet innehåller webbläsarens händelseobjekt:

Exempel

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Flytta musen över mig!</h1>
<p>Koordinater: {{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>

Prova själv