Dyrektywy własne - Atrybuty <, =

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:
angular.module('Appa').controller('AppaCtrl', [ '$scope', function($scope) {

    $scope.infomessage = {
        title : 'Informacja o itemach - ',
        content : 'Itemy są podzielone na kategorie'
    };
    
} ]);           
a wraz z nim dyrektywę z atrybutem =:
angular.module('appa.form').directive('appaFormCategories', function() {
    
    return {
        scope: {
            sometextparam: '=sometext'
        },
        restric t : "E",
        templateUrl : 'appaform/appa-item-form/categories/appa-form-categories.html'
    };
    
});
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:
<div class="col-md-12">Przekazany parametr: {{sometextparam.title}} {{sometextparam.content}}</div>
Wstawiając dyrektywę, musimy podać w naszym atrybucie sometext nazwę lokalnej własności przypisanej w ramach scope:
<appa-form-categories sometext='infomessage'></appa-form-categories>
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:
angular.module('appa.form').directive('appaFormCategories', function() {
    
    return {
        scope: {
            sometext: '='
        },
        restric t : "E",
        templateUrl : 'appaform/appa-item-form/categories/appa-form-categories.html'
    };
    
});
Następnie w ramach pliku HTML dyrektywy możemy się odwołać do wskazanej wartości tak jak w poniższym fragmencie:
<div class="col-md-12">Przekazany parametr: {{ sometext }}</div>
Jeśli do dyrektywy przekazaliśmy cały obiekt, wówczas możemy się dostać do danych w polach:
<div class="col-md-12">Przekazany parametr: {{sometext.title}} {{sometext.content}}</div>
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):
<appa-form-categories sometext='infomessage'></appa-form-categories>
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

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy: stackshare
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .


Pozycjonowanie stron: Grupa TENSE