AngularJS-Ereignisse
AngularJS hat seine eigenen HTML-Events-Direktiven.
AngularJS-Ereignisse
Sie können Ihren HTML-Elementen AngularJS-Ereignis-Listener hinzufügen, indem Sie eine oder mehrere dieser Anweisungen verwenden:
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
Die Ereignisdirektiven ermöglichen es uns, AngularJS-Funktionen bei bestimmten Benutzerereignissen auszuführen.
Ein AngularJS-Event überschreibt kein HTML-Event, beide Events werden ausgeführt.
Mausereignisse
Mausereignisse treten auf, wenn der Cursor in dieser Reihenfolge über ein Element bewegt wird:
- von mouseover
- of-mouseenter
- ng-Mausbewegung
- ng-Mausblatt
Oder wenn eine Maustaste auf ein Element geklickt wird, in dieser Reihenfolge:
- von-mousedown
- von-mouseup
- von klicken
Sie können jedem HTML-Element Mausereignisse hinzufügen.
Beispiel
Erhöhen Sie die Zählvariable, wenn die Maus über das H1-Element bewegt wird:
<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 Klickrichtlinie
Die ng-click
Direktive definiert AngularJS-Code, der ausgeführt wird, wenn auf das Element geklickt wird.
Beispiel
<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>
Sie können auch auf eine Funktion verweisen:
Beispiel
<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>
Umschalten, Wahr/Falsch
Wenn Sie einen Abschnitt des HTML-Codes anzeigen möchten, wenn auf eine Schaltfläche geklickt wird, und ihn ausblenden, wenn die Schaltfläche erneut angeklickt wird, wie ein Dropdown-Menü, lassen Sie die Schaltfläche sich wie einen Kippschalter verhalten:
Menu:
Beispiel
<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 showMeVariable beginnt als boolescher Wert false.
Die myFuncFunktion setzt die showMeVariable auf das Gegenteil von dem, was sie ist, indem sie den !Operator (not) verwendet.
$event-Objekt
Sie können das $eventObjekt beim Aufruf der Funktion als Argument übergeben.
Das $eventObjekt enthält das Ereignisobjekt des Browsers:
Beispiel
<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>