Dyrektywy własne - Atrybut @

Atrybuty dopasowujące określają sposób w jaki dane będą przekazywane pomiędzy dyrektywą (child), a komponentem wykorzystującym tą dyrektywę (parent). Pierwszym rodzajem atrybutów o jakim będziemy mówić jest atrybut dopasowujący wartość. Jego działanie polega na tym, że dane przekazywane do dyrektywy są dostarczane pod postacią konkretnych wartości, np. tekstu. W ten sposób między komponentem parenta a dyrektywą zostaje nawiązana relacja jednokierunkowa (one-direction). Oznacza to, że każda zmiana danej wartości po stronie kontrolera zostanie odzwierciedlona w dyrektywie, natomiast dowolna jej zmiana po stronie dyrektywy nie będzie miała wpływu na wartość, która znajduje się w kontrolerze.

Atrybut dopasowujący '@'

Tak jak wszystkie inne atrybuty tego typu podajemy go w ramach obiektu konfiguracyjnego scope. Nazwa własności w obiekcie odpowiada nazwie atrybutu jakiego chcemy użyć w naszej dyrektywie: 
angular.module('appa.form').directive('appaFormCategories', function() {
    
    return {
        scope: {
            sometext: '@'
        },
        restric t : "E",
        templateUrl : 'appaform/appa-item-form/categories/appa-form-categories.html'
    };
    
});
W pliku HTML dyrektywy możemy odwołać się do wskazanej własności: 
<div class="col-md-12">Przekazany parametr: {{ sometext }}</div>
Tak zdefiniowana dyrektywa może być już wstawiona do HTML-a parenta (np. do formularza dodawania itemu, dla którego będziemy definiować listę kategorii): 
<appa-form-categories sometext='Informacja o itemach'></appa-form-categories>
W rezultacie dyrektywa pojawi się w przeglądarce w postaci HTML-a zawierającego div-a z tekstem "Informacja o itemach".

W ten sposób przekazujemy wartości tekstowe do dyrektyw. Co jednak gdybyśmy chcieli użyć w atrybucie sometext czegoś więcej niż tylko zwykłego stringa. Chcielibyśmy na przykład dodać do tego tekstu wyrażenie {{ infomessage }}, które będzie wyświetlało tekst ze zmiennej ustawianej gdzieś w kontrolerze.

Wtedy najpierw inicjujemy tą zmienną: 
angular.module('appa.form').controller('AppaFormCategoriesCtrl', [ '$scope', function($scope) {

    $scope.infomessage = 'Itemy są podzielone na kategorie';
    
} ]);
, a następnie dodajemy wyrażenie jako część atrybutu sometext: 
<appa-form-categories sometext='Informacja o itemach - {{ infomessage }} '></appa-form-categories>
W rezultacie dyrektywa pojawi się w przeglądarce w postaci HTML-a zawierającego div-a z tekstem "Informacja o itemach - Itemy są podzielone na kategorie".

Atrybut dopasowujący '@attr'

Przykład, który opisaliśmy charakteryzuje się tym, że nazwa naszego atrybutu stosowana w trakcie wstawiania dyrektywy do HTML-a, jest dokładnie taka sama jak nazwa określona w obiekcie konfiguracyjnym scope. Może się jednak zdarzyć, że będziemy chcieli zdefiniować te nazwy inaczej. W takiej sytuacji musimy określić nową nazwę własności w obiekcie konfiguracyjnym, a następnie przenieść dotychczasową nazwę na prawo, tak by teraz stała się częścią zespoloną 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'
    };
    
});
Następnie zmieniamy również starą nazwę na nową w pliku HTML: 
<div class="col-md-12">Przekazany parametr: {{ sometextparam }}</div>
Dzięki tym zmianom możemy teraz używać innej nazwy w dyrektywie (sometextparam) oraz innej nazwy (sometext) podczas wstawiania tej dyrektywy w pliku HTML parenta: 
<appa-form-categories sometext='Informacja o itemach - {{ infomessage }} '></appa-form-categories>
W rezultacie dyrektywa pojawi się w przeglądarce w postaci HTML-a zawierającego div-a z tekstem "Informacja o itemach - Itemy są podzielone na kategorie".
Nasza rekomendacja
Rozsądnym rozwiązaniem jest ograniczanie "produkcji" różnorodnych nazw dla tych samych aspektów kodu oraz utrzymywanie jego maksymalnej czytelności, dlatego też warto używać prostszej wersji atrybutu dopasowującego wartość - w postaci '@'. Niemniej atrybut '@attr' staje się bardzo przydatny, gdy tworzymy dyrektywę generyczną, czyli taką która jest bardzo ogólna i niekoniecznie związana z kontekstem wywołania. Wtedy w naszym kontrolerze możemy chcieć użyć nazwy, która jest charakterystyczna w ramach tego kontrolera i użycie tam ogólnej nazwy definiowanej w dyrektywie może nam nic nie mówić w przyszłości, gdy wrócimy do tego kodu.
Używamy w StartAPPa


W aplikacji używamy dyrektywy appa-form-categories, której zadaniem jest zbudowanie komponentu wyświetlającego listę wielokrotnego wyboru kategorii, w ramach formularza dodającego i edytującego itemy. Formularz ten jest częścią kursu Formularz Zaawansowany. Zawiera on również kilka innych dyrektyw, np. dyrektywy tworzące komponenty dat lub dyrektywy budujące listy atrybutów w postaci grupy checkboxów.
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 .

Starter   Jak to działa   Aplikacja  
Facebook Obserwuj nas   Polityka Cookies   Regulamin   Licencja   Ochrona prywatności  
Pozycjonowanie stron: Grupa TENSE