W poprzednim rozdziale przekazywaliśmy do dyrektywy konkretne wartości. Nawet jeśli definiowaliśmy w kontrolerze obiekt, to do dyrektywy
i tak była wprowadzana wartość przy pomoc wyrażenia
{{ }}. W ten sposób definiowaliśmy relację jednokierunkową.
Teraz chcemy zbudować relację dwukierunkową, tak aby zmiana własności w dyrektywie została odzwierciedlona w kontrolerze i na odwrót.
Atrybut dopasowujący '=attr'
Zgodnie z tym co napisaliśmy we wstępie - zamiast gotowej wartości - przekażemy do dyrektywy
nazwę własności zdefiniowanej lokalnie w kontrolerze.
Mamy więc kontroler:
a wraz z nim dyrektywę z atrybutem
=:
W ten sposób możemy w dyrektywie używać całego obiektu, co pozwala nam na wyciągnięcie danych używając konwencji obiektowej:
Wstawiając dyrektywę, musimy podać w naszym atrybucie
sometext nazwę lokalnej własności przypisanej w ramach
scope:
W rezultacie dyrektywa pojawi się w przeglądarce jako HTML zawierający div-a z tekstem "Informacja o itemach - Itemy są podzielone na kategorie".
Pamiętajmy, że
relacja określona atrybutem =attr jest relacją dwukierunkową (bidirectional), a to oznacza, że
jeśli będziemy zmieniać z poziomu dyrektywy obiekt
sometextparam, to będziemy zmieniać wartość nie tylko w obrębie dyrektywy,
ale też automatycznie zmienimy wartość w kontrolerze.
Zasada zmiany własności dotyczy nie tylko przypisanych do niej obiektów, ale każdego typu własności wprowadzanej w ramach relacji dwukierunkowej. To jest o tyle istotne,
że same obiekty, nawet w przypadku zastosowania relacji jednokierunkowej, będą ulegać zmianie między dyrektywą, a komponentem parenta (wyjaśniamy to
na końcu tego rozdziału). W przypadku opisywanej relacji dwukierunkowej zmianie ulegnie natomiast każda własność,
nawet taka do której przypisujemy wartość tesktową.
Atrybut dopasowujący '='
Podobnie jak to miało miejsce w przypadku atrybutu '@', tak samo używając atrybutu '=', możemy pominąć jego nazwę. Wówczas nasza dyrektywa będzie miała
taki wygląd:
Następnie w ramach pliku HTML dyrektywy możemy się odwołać do wskazanej wartości tak jak w poniższym fragmencie:
Jeśli do dyrektywy przekazaliśmy cały obiekt, wówczas możemy się dostać do danych w polach:
Teraz aby takie rozwiązanie zadziałało, musimy podać w naszym atrybucie
sometext nazwę
lokalnej własności przypisanej w ramach
scope (tak jak to zostało pokazane w kontrolerze w poprzednim paragrafie):
Oczywiście - tak jak to miało miejsce w przypadku '=attr' - tutaj również mamy do czynienia z relacją dwukierunkową, a efekt wykonania tego kodu będzie także
identyczny jak poprzednio.
Atrybut dopasowujący '<' oraz '<attr'
Oba te atrybuty działają analogicznie jak atrybut "=". Jedyna różnica polega na tym, że
atrybuty te tworzą relację jednokierunkową (one-direction).
Oznacza to, że wykonanie zmiany we własności przekazanej do dyrektywy nie zmieni tej własności w komponencie parenta, a więc w kontrolerze własność ta będzie miała nadal tą samą wartość.
Uwaga
Podczas korzystania z atrybutu '<' może spotkać nas przykra niespodzianka. W przypadku gdy będziemy przekazywać do dyrektywy obiekt (zamiast pojedynczej własności, np. tekstowej),
wówczas mimo że relacja jest jednokierunkowa, to
wartości obiektu zmienione po stronie dyrektywy zmienią się również po stronie kontrolera, gdyż
przekazany obiekt ciągle wskazuje na to samo miejsce w pamięci!
Rekomendacja
W zasadzie wszystko co napisaliśmy w rekomendacji w rozdziale
Dyrektywy własne - Atrybut dopasowujący wartość @
znajduje zastowanie również tutaj. Dodatkowo warto wspomnieć, że korzystanie z atrybutów dopasowujących wartość jest bezpieczniejsze od dopasowywania własności (np. w postaci obiektu).
Eliminuje to ryzyko przypadkowej zmiany własności zarządzanej przez kontroler parenta, wywołanej poprzez zmianę własności z poziomu dyrektywy.
Oczywiście wszystko zależy od wymagań jakie musimy spełnić w kontekście realizowanego zadnia. Jeśli więc naprawdę musimy wprowadzić atrybut dopasowujący własność,
to używajmy go, ale posługujmy się nim w pełni świadomie.
Używamy w StartAPPa
Tak jak napisaliśmy w rozdziale
Dyrektywy własne, w aplikacji StartAPPa stosujemy kilkanaście różnych dyrektyw.
Pełną listę dyrketyw znajdziecie we wspomnianym rozdziale, natomiast jeśli zależy Wam na konkretnym przypadku użycia dyrektywy opartej o atrybut dopasowujący własność, to możecie go znaleźć
w kursie
Formularz Podstawowy. Korzystamy tam z dyrektywy
compare-to porównującej hasła na formularzu.
Linki:
https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object