AngularJS- Ereignisse

AngularJS hat seine eigenen HTML-Ereignisanweisungen.

AngularJS- Ereignisse

Sie können einen oder mehrere dieser Anweisungen verwenden, um AngularJS-Ereignisabhörer zu Ihrem HTML-Element hinzuzufügen:

  • 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

Event-Aufrufe erlauben es uns, AngularJS-Funktionen auf bestimmten Benutzerereignissen auszuführen.

AngularJS-Ereignisse überschreiben keine HTML-Ereignisse, beide Ereignisse werden ausgeführt.

Mausereignisse

Wenn der Cursor auf das Element bewegt wird, treten die Mausereignisse in folgender Reihenfolge auf:

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

Oder, wenn ein Element angeklickt wird, werden die Ereignisse in folgender Reihenfolge ausgelöst:

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

Du kannst Mausereignisse auf jedem HTML-Element hinzufügen.

Beispiel

Erhöhe die Variable count, wenn der Mauszeiger auf das H1-Element bewegt wird:

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

Selbst ausprobieren

ng-click-Anweisung

ng-click Anweisungen definieren den AngularJS-Code, der beim Klicken auf das Element ausgeführt wird.

Beispiel

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

Selbst ausprobieren

Du kannst auch eine Funktion aufrufen:

Beispiel

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

Selbst ausprobieren

Umschalten, wahr/falsch

Wenn du willst, dass ein Teil des HTML-Codes beim Klicken auf die Schaltfläche angezeigt wird und beim erneuten Klicken auf die Schaltfläche ausgeblendet wird, wie eine Dropdown-Liste, dann soll die Schaltfläche wie ein Schalter funktionieren:

Klicke mich

Beispiel

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Klicke mich!</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>

Selbst ausprobieren

showMe Die Variable beginnt als boolescher Wert. false.

myFunc die Funktion durch Verwendung !der (nicht-)logische Operator, der showMe die Variable auf den umgekehrten Wert ihres aktuellen Wertes gesetzt werden.

$event-Objekt

Bei der Aufrufung der Funktion kann $event Das Objekt wird als Parameter übergeben.

$event Das Objekt enthält das Ereignisobjekt des Browsers: }}

Beispiel

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Bewegen Sie den Mauszeiger auf mich!</h1>
<p>Koordinaten: {{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>

Selbst ausprobieren