AngularJS are propriile sale HTML evenimente directive.
Evenimente AngularJS
Puteți adăuga AngularJS ascultătorii eveniment pentru elemente HTML utilizând una sau mai multe dintre aceste directive:
-
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
Directivele de evenimente ne permite să ruleze AngularJS funcții la anumite evenimente de utilizator.
Un eveniment AngularJS nu va suprascrie un eveniment HTML, ambele evenimente vor fi executate.
mouse-ul Evenimente
mouse-ul evenimente apar atunci când cursorul se va muta peste un element, în această ordine:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
Sau atunci când un buton al mouse-ului se face clic pe un element, în această ordine:
- ng-mousedown
- ng-mouseup
- ng-clic
Puteți adăuga evenimente mouse-ul pe orice element HTML.
Exemplu
Creșterea variabilei count atunci când mouse-ul se mută peste elementul H1:
<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> Încearcă - l singur » Directiva ng-clic
ng-click directivă definește codul AngularJS care va fi executat atunci când elementul este apasat.
Exemplu
<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> Încearcă - l singur » Puteți consulta, de asemenea la o funcție:
Exemplu
<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> Încearcă - l singur » Comutare, Adevărat / Fals
Dacă doriți să afișați o secțiune de cod HTML atunci când un buton este apăsat, și să se ascundă atunci când butonul este apăsat din nou, ca un meniu drop-down, face butonul să se comporte ca un comutator:
Meniul:
Exemplu
<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> Încearcă - l singur » showMe Variabila începe ca valoarea boolean false .
myFunc Funcția setează showMe variabila la opusul a ceea ce este, prin utilizarea ! (not) operatorul.
$ Eveniment Obiect
Puteți trece de $event obiect ca argument la apelarea funcției.
$event obiect conține obiect eveniment al browser - ului:
Exemplu
<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>
Încearcă - l singur »