AngularJS - zdarzenia

Stronę tą wyświetlono już: 796 razy

AngularJS udostępnia szereg własnych atrybutów (dyrektyw), które umożliwiają w kodzie strony podpięcie funkcji JavaScript lub wykonanie jakiegoś kodu w wyniku wywołania określonego zdarzenia. Taka funkcja może przyjmować jako argument zmienną $event, która zawiera dodatkowe informacje dotyczące np. położenia kursora myszki, gdy dane zdarzenie zostało wywołane. Lista atrybutów (dyrektyw) udostępnionych przez AngularJS jest następująca:

ng-blur - wywołanie zdarzenia rozmycia;
ng-change - wywołanie zdarzenia związanego z zmianą stanu kontrolki, np. zmiana tekstu w kontrolce do wpisywania tekstu;
ng-click - wywołanie zdarzenia związanego z kliknięciem elementu HTML-a;
ng-copy - wywołanie zdarzenia związanego z kopiowaniem poprzez wciśnięcie kombinacji Ctrl+c;
ng-cut - wywołanie zdarzenia związanego z wycięciem Ctrl+x;
ng-dblclick - wywołanie zdarzenia związanego z podwójnym kliknięciem myszką danego elementu HTML-a;
ng-focus - wywołanie zdarzenia związanego z przejęciem lub utratą fokusa, czyli obsługi klawiatury przez daną kontrolkę;
ng-keydown - wywołanie zdarzenia wciśnięcia przycisku klawiatury;
ng-keypress - wywołanie zdarzenia na wciśnięcia przycisku klawiatury;
ng-keyup - wywołanie zdarzenia zwolnienia przycisku klawiatury;
ng-mousedown - wywołanie zdarzenia wciśnięcia przycisku myszy;
ng-mouseenter - wywołanie zdarzenia związanego z wejściem kursora myszki w obszar danego elementu HTML-a;
ng-mouseleave - wywołanie zdarzenia związanego z opuszczeniem kursora myszki obszaru danego elementu HTML-a;
ng-mousemove - wywołanie zdarzenia związanego z ruchem myszki;
ng-mouseover - wywołanie zdarzenia związanego z ruchem myszki nad obszarem danego elementu HTML-a;
ng-mouseup - wywołanie zdarzenia związanego z zwolnieniem przycisku myszy;
ng-paste - wywołanie zdarzenia wklejenia Ctrl+p

Dla przykładu wcześniej omawiany kod wzbogaciłem o dodatkowe przyciski umożliwiające usuwanie danego elementu z listy wykorzystując zdarzenie ng-click. Teraz kod wygląda więc następująco:

Listing 1

<table cellspacing = "0">
<caption>Beautiful people list</caption>
<tr><th></th><th>Nr.</th><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr>
<tr ng-repeat="beautifulPerson in beautifulPeople">
<td><button ng-click="removeIndex($index)" class="deleteItem"><img src="delete.svg" width = "15px" alt="delete" class="deleteItem"/></button></td>
<td>{{ $index + 1 }}</td>
<td>{{ beautifulPerson.name }} </td>
<td>{{ beautifulPerson.surname}}</td>
<td>{{ beautifulPerson.age }}</td>
</tr>
<tr>
<td colspan="2"><button ng-click = "addElement()">Dodaj</button></td>
<td><input type="text" ng-model = "person.name" name = "personName"/></td>
<td><input type = "text" ng-model = "person.surname" name = "personSurname"/></td>
<td><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></td>
</tr>
</table>

Sam kod funkcji podpiętej pod zdarzenie kliknięcia wygląda następująco:

Listing 2

<script>
let controller = app.controller(
"myFirstControllerEver",
function ($scope){
// zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj:
$scope.person = {name: 'myName', surname: 'mySurname', age: 18};
// tworzę zmienną, która będzie przechowywała nazwiska
$scope.beautifulPeople = [
{ name: 'Donald', surname: 'Tłusk', age: 61},
{ name: 'Donald', surname: 'Dumb', age: 72}
];
$scope.addElement = function(){
if(
$scope.person.name.length !== 0 && $scope.person.surname.length !== 0
&& !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
$scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
$scope.beautifulPeople.sort(
function(a, b){
return (a.surname + a.name).localeCompare((b.surname + b.name));
}
);
$scope.person.name = "myName";
$scope.person.surname = "mySurname";
}else{
alert("Wprowadź nazwisko i imię!");
}
}
// Tworzę funkcję, która została podpięta pod zdarzenie kliknięcia
$scope.removeIndex = function(index){
console.log(index);
if(confirm("Czy naprawdę pragniesz usunąć: " + $scope.beautifulPeople[index].name + " " + $scope.beautifulPeople[index].surname)){
$scope.beautifulPeople.splice(index, 1);
}
}
});
</script>