Angularjs ma własne HTML wydarzenia wskazówki.
angularjs Wydarzenia
Możesz dodać angularjs detektory zdarzeń do elementów HTML za pomocą jednego lub więcej z tych dyrektyw:
-
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
Dyrektywy imprez pozwala nam uruchomić angularjs funkcje w pewnych zdarzeń użytkowników.
Angularjs zdarzenie nie zastąpią zdarzenia HTML, obie imprezy będą realizowane.
Zdarzenia myszy
zdarzenia myszy występują, gdy kursor przesuwa się nad elementem, w następującej kolejności:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseLeave
Lub gdy użytkownik wciśnie przycisk myszy na elemencie, w następującej kolejności:
- ng-mouseDown
- ng-mouseUp
- ng-click
Możesz dodać zdarzenia myszy na dowolnym elemencie HTML.
Przykład
Zwiększenie zmiennej count, gdy mysz porusza się nad elementem 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> Spróbuj sam " Dyrektywa ng-click
ng-click Dyrektywa definiuje kod angularjs który zostanie wykonany, gdy element jest kliknięty.
Przykład
<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> Spróbuj sam " Można również odwołać się do funkcji:
Przykład
<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> Spróbuj sam " Przegubowe, Prawda / Fałsz
Jeśli chcesz pokazać fragment kodu HTML, gdy przycisk zostanie kliknięty, i ukryć, gdy przycisk zostanie kliknięty ponownie, jak menu rozwijanego, aby przycisk zachowywać jak przełącznik:
Menu:
Przykład
<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> Spróbuj sam " showMe zmiennej zaczyna się jako wartość logiczną false .
myFunc funkcja ustawia showMe zmienną przeciwieństwem tego, co to jest, za pomocą ! (Not) operator.
$ Obiekt zdarzenia
Można przekazać $event obiekt jako argument przy wywołaniu funkcji.
$event obiekt zawiera obiekt zdarzenia w przeglądarce:
Przykład
<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>
Spróbuj sam "