AngularJS verfügt über eine eigene HTML-Ereignisse Richtlinien.
AngularJS Veranstaltungen
Sie können durch die Verwendung einer oder mehrerer dieser Richtlinien AngularJS Ereignis-Listener Ihre HTML-Elemente hinzufü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
Die Veranstaltung Richtlinien erlaubt es uns, AngularJS Funktionen zu bestimmten Benutzerereignisse zu laufen.
Ein AngularJS Veranstaltung wird ein HTML-Ereignis nicht überschrieben werden soll, werden beide Ereignisse ausgeführt werden.
Mausereignisse
Mausereignisse auftreten, wenn der Cursor über ein Element bewegt, in dieser Reihenfolge:
- ng-MouseEnter-
- ng-Mouseover
- ng-mousemove-
- ng-mouseleave
Oder wenn eine Maustaste auf ein Element geklickt haben, in dieser Reihenfolge:
- ng-mousedown-
- ng-mouseup
- ng-Klick
Sie können Mausereignisse auf einem beliebigen HTML-Element hinzufügen.
Beispiel
Erhöhen Sie die Zählvariable, wenn die Maus bewegt sich über das H1-Element:
<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> Versuch es selber " Die ng-Click-Richtlinie
Die ng-click - Richtlinie definiert AngularJS - Code, der ausgeführt wird , wenn das Element angeklickt 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> Versuch es selber " Sie können auch auf eine Funktion beziehen:
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> Versuch es selber " Toggle, True / False
Wenn Sie einen Abschnitt von HTML-Code zu erhalten, wenn eine Schaltfläche geklickt wird, und ausgeblendet, wenn Sie die Taste erneut angeklickt wird, wie ein Drop-Down-Menü, stellen Sie die Taste wie ein Kippschalter verhalten:
Menü:
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> Versuch es selber " Die showMe Variable beginnt als Booleschen Wert aus false .
Die myFunc Funktion setzt die showMe Variable auf das Gegenteil dessen , was es ist, mit dem ! (Nicht) Operator.
$ Event-Objekt
Sie können den Pass $event - Objekt als Argument beim Aufruf der Funktion.
Das $event - Objekt 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>
Versuch es selber "