pprogramowanie;

Zwięźle na temat programowania

Facebook

Zdarzenia

18 grudnia 2016, kategoria: AngularJs

Zdarzenia są bardzo ważnym mechanizmem umożliwiającym interakcję użytkownika z naszą aplikację. Oczywiście, w AngularJS zdarzenia zostały obsłużone wyjątkowo dobrze. Czym są zdarzenia? Są to przechwycenia wszelkich operacji jakie może wykonać użytkownik w naszej aplikacji np. kliknięcie myszką, naciśnięcie klawisza.

Podpinanie zdarzeń

Zdarzenia w AngularJS podpinamy poprzez dodanie do dowolnego elementu HTML odpowiedniej dyrektywy reprezentującej zdarzenie. Jako parametr dyrektywy należy podać funkcję zwrotną, która zostanie wykonana w danej sytuacji. Składania zdarzenia:

<element nazwa_zdarzenia="funkcja" />

A więc przykładowo zdarzenie kliknięcia w przycisk wywołujące funkcje $scope.logowanie() wygląda następująco:

<button ng-click="logowanie()">Zaloguj</button>

Pełny kod działającej aplikacji:

<script>
    var app = angular.module("mainModule", []);
    
    app.controller('simpleCtrl', simpleController);
    
    function simpleController($scope) {
        $scope.uzytkownik = {
            login: '',
            haslo: ''
        };
        $scope.logowanie = function() {
            console.log('wpisany login: ' + $scope.uzytkownik.login);
            console.log('wpisane haslo: ' + $scope.uzytkownik.haslo);
            console.log('ktos kliknął logowanie!');
        };
    }
</script>

<body ng-app="mainModule" ng-controller="simpleCtrl">
    <p>Login: <input ng-model="uzytkownik.login" /></p>
    <p>Hasło: <input ng-model="uzytkownik.haslo" /></p>
    <button ng-click="logowanie()">Zaloguj</button>
</body>

Do przycisku logowania zostało podpięte zdarzenie ng-click wywołujące funkcje logowanie(). Bindując zmienne lub funkcje podpięte do $scope z warstwą widoku zawsze pomijamy nazwę $scope. Efekt działania jest następujący:

ngclick

W przypadku podania nieistniejącej nazwy funkcji do parametru dyrektywy zdarzenia, niestety nic się nie stanie. W konsoli nie pojawi się żaden błąd. Jeżeli coś nie działa a w konsoli nie ma błędów, warto w pierwszej kolejności sprawdzić czy zdarzenia podpięte są pod istniejące funkcje lub czy nie zapomnieliśmy o nawiasach.

Lista dostępnych zdarzeń

Oto lista dostępnych zdarzeń:

Zdarzenie Wywoływany gdy
ng-blur Dany element traci aktywność (traci focus)
ng-change Zmieni się model ng-model danego elementu
ng-click Kliknięcie myszką
ng-copy Nastąpi skopiowanie wartości elementu
ng-cut Nastąpi wycięcie wartości elementu
ng-dblclick Podwójne kliknięcie myszką
ng-focus Dany element zostaje aktywny (focus)
ng-keydown Naciśnięcie klawisza
ng-keypress Naciśnięcie klawisza (rozróżnia wielkość liter)
ng-keyup Puszczenie klawisza
ng-mousedown Naciśnięcie klawisza myszy
ng-mouseenter Najechanie myszą na element gdziekolwiek
ng-mouseleave Zjechanie myszą z elementu
ng-mousemove Poruszanie myszą po elemencie
ng-mouseover Najechanie myszą na element lub jego dzieci
ng-mouseup Puszczenie klawisza myszy
ng-paste Wklejenie wartości do elementu

Większości wymienionych zdarzeń w codziennej pracy nie używa się. Najważniejsze zdarzenia, które na pewno należy zapamiętać to ng-click oraz ng-change. Za pomocą kliknięcia możemy obsłużyć wszystkie przyciski i formularze w aplikacji.

Z kolei ng-change to wywołuje funkcje zwrotną podczas jakiejkolwiek zmiany modelu przez użytkownika, więc może np. przeliczyć w tle dane. Jest to dobra alternatywa dla zakładania obserwatorów na $scope o czym będzie w innym artykule.

Zdarzenie ng-change

Wcześniej czy później zdasz sobie sprawę, że ng-change jest jednym z najbardziej przydatnych zdarzeń. Aby zdarzenie działało, musi być nałożone na obiekt posiadający model podpięty dyrektywą ng-model. To właśnie zmiana wartości modelu wpływa na wywołanie ng-change. Przykładowe użycie:

<script>
    var app = angular.module("mainModule", []);
    
    app.controller('simpleCtrl', simpleController);
    
    function simpleController($scope) {
        
        $scope.check = false;
        $scope.ilosc = 0;
        
        $scope.klikniecie = function() {
            $scope.ilosc++;
        }
    }
</script>

<body ng-app="mainModule" ng-controller="simpleCtrl">
    <p>Zaznacz checkbox: <input type="checkbox" ng-model="check" ng-change="klikniecie()" /></p>
    <p>
        Checkbox jest 
        <span ng-if="check" style="color:#00CE00; font-weight:bold;">zaznaczony</span>
        <span ng-if="!check" style="color:#FF0000; font-weight:bold;">odznaczony</span>
    <p>
    <p>Został kliknięty <b></b> razy</p>
</body>

Efekt działania jest przewidywalny:

bbb

Przy jakiejkolwiek zmianie modelu podpiętego do pola typu checkbox zostaje wywołana funkcja klikniecie(). Zwiększa ona wartość zmiennej ilosc, który jest następnie wyświetlany za pomocą wyrażenia _. Dodatkowo zastosowana dyrektywa _ng-if sprawdza aktalny stan pola i wyświetla odpowiedni span z tekstem.

repozytorium: /angularjs/zdarzenia.md

licencja: Creative Commons BY-SA 3.0

autor: Karol Trybulec

Wszystkie artykuły przechowywane są w repozytorium Github. Jeżeli uważasz, że coś można poprawić, możesz nanieść swoje zmiany. Wszelkie poprawki po zaakceptowaniu stają się automatycznie widoczne na blogu.