AngularJS - zdarzenia
Stronę tą wyświetlono już: 872 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:
- <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:
- <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>
Cały zmodyfikowany projekt przykładu z kodem można zobaczyć tutaj.

Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson

Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland

Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua

Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley

Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota

Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett

Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas

Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms

Tytuł:
HTML,CSS i JavaScript dla każdego. Wydanie VII
Autor:
Laura Lemay, Rafe Colburn, Jennifer Kyrnin

Tytuł:
Roboty JavaScript od podstaw. Projekty NodeBots dla platformy Johnny-Five z wykorzystaniem płytek Raspberry Pi, Arduino oraz BeagleBone
Autor:
Rick Waldron, Backstop Media (lista współautorów w uwagach dodatkowych)