Skocz do zawartości

Zdjęcie
- - - - -

[AngularJS] Dyrektywa

angular angularjs dyrektywa directive ng tutorial

Brak odpowiedzi do tego tematu
  • Zaloguj się, aby dodać odpowiedź
Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 07 października 2014 - 18:15

#1

Siemano.

 

Troche mnie nie było tutaj, a obiecałem że będę dalej pisał w tym temacie. Mam chwilę wolnego czasu na napisanie wprowadzenia do dyrektyw a więc..

 

Na początku chciałbym wytłumaczyć w prosty sposób czym jest dyrektywa i po co nam do szczęścia.

 

Dyrektywy w AngularJS to nic innego jak custom elements, które posiadają własą konfigurację, mogą (aczkolwiek nie jest to wymagane) posiadać własny kontroler, mają możliwość odizolowania scope'a (przykładowo jeśli mamy dwie dyrektywy, które są kontrolowane przez scope'a rodzica, między kontrolerami, o których wspomniałem wcześniej), posiadają przydatne metody do kompilowania oraz metody linkujące i wiele innych, które będę w miare czasu opisywał.

 

Opisywane dyrektywy przydatne sa do tworzenia reużywalnych komponentów. Pomyślmy że mamy zegarek, który ma swoje zadanie, odlicza czas itp. - możemy go użyć w każdym innym projekcie, który jest pisany w AngularJS. Zastosowań jest mnóstwo. Ale tu nie będę przytaczał przykładów, sami sobie poszukacie ;)

 

Poniżej wyjaśnie kilka podstaw, stworzymy własną dyrektywe.

 

 

Moja dyrektywa - pierwszy zapis

<moja-dyrektywa></moja-dyrektywa>

Wygląda dziwnie, bo w normalnie w HTML'u nie mamy takiego tagu. Chyba że sztucznie go stworzymy za pomocą JS'a. To tylko zapis w HTML'u, który nic nie znaczy, dopóki nie zarejestrujemy w pliku JS naszej dyrektywy.

 

Rejestrowanie dyrektyw wygląda następująco:

 

1. Nie możemy zapomnieć o tym aby dyrektywa była dzieckiem całej aplikacji:

var app = angular.module('myApp', []);

2. Teraz możemy zadeklarować naszą dyrektywe:

app.directive('mojaDyrektywa', function() {
    // Kod
});

Info: Zauważmy, że zapis jest bardzo podobny do zapisu kontrolera. Dyrektywa przyjmuje także dwa parametry. Nazwa oraz funkcja zwrotna (tzw. callback) Jedno bardzo ważne w tym wszystkim jest by uważać na nazwe dyrektywy w HTML'u oraz w JS. W HTML używamy myślnika a w JS używamy po prostu camelCase zamist odstępów. Jeśli dyrektywa jest krótka, wtedy można wpisać jedno słowo, np. moje etc. To bardzo ważne, ponieważ początkujący programiści często popełniają ten błąd a później marudzą że nie działa i zniechęcają się bardzo szybko :P

 

Świetnie. Teraz wiemy jak deklarować dyrektywy, wiemy czym one są, a więc przechodzimy dalej.

 

 

Konfiguracja dyrektywy

 

 

Wyjaśnie tutaj prostą konfigurację, ponieważ jest sporo do opisywania w tej kwestii.

Pierwszy parametr naszej konfiguracji będzie restrict (string).

 

Info: Dyrektywa zwraca nam obiekt, w którym wklepujemy naszą konfiguracje.

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
    return {
        restrict: "E"
    };
});

restrict to pole, które określa w jakim formacie angularJS ma czytać dyrektywe. Mamy kilka możliwości:

 

E: Oznacza element:

<moja-dyrektywa>

A: Oznacza atrybut:

<div my-directive>

C: Oznacza klasę:

<div class="moja-dyrektywa">

M: Oznacza komentarz

<– directive: moja-dyrektywa –>

Info: Zaleca się unikać komentarzy jako parametru dla restrict ponieważ nie wyglądają dobrze oraz starsze IE nie radzą sobie z tym. Także poleca się aby unikać C jako klasy, ponieważ nie wygląda to dobrze w kodzie. W tym przypadku to kwestia gustu. Najbardziej zalecane są pozostałe czyli E oraz A.

 

Wartości dla tego pola można łączyć:

restrict: "EA"

W tej chwili mamy stworzoną dyrektywe. Zastosujmy kolejny parametr aby to jakoś wyglądało - dodamy treść naszej dyrektywy poprzez pole template (string/function).

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
  return {
    restrict: "E",
    template: "<p>Treść!</p>"
  };
});

Ta operacja pozwoliła nam wkleić pomiędzy naszą dyrektywe dowolny kod HTML. Demo

Jednak jeśli zobaczymy źródło w kodzie HTML, nasza dyrektywa się nie zmieni. Nie zostanie tam nic 'zappendowane' ani nic.

 

Możemy także użyć funkcji w tym przypadku:

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
  return {
    restrict: 'E',
    template: function(tElem, tAttr) {
      tElem.text('Treść!');
    }
  };
});

Funkcja przyjmuje dwa parametry. Pierwszy określa element (element do którego dyrektywa jest przypisana) lub atrybut. Strorzyliśmy wynik jak w przypadku pierwszym. Demo

 

Info: Możemy także przełamywać wiersze w tym polu.

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
  return {
    restrict: 'E',
    template: '\
        <div>\
            <a href="#">Jakiś link...</a>\
            <p>Moja treść</p>\
        </div>\
    '
  };
});

Efekt możecie przetestować tutaj: Demo - Niestety nie wygląda to fajnie i lepiej użyć templateUrl zamiast template. templateUrl przyjmuje string, gdzie przekazujemy ścieżkę do pliku HTML lub funkcje która musi zwrócić ścieżkę do pliku HTML.

 

 

Dobrze. Mamy jakiś tekst, jakąś dyrektywe. Zróbmy jakąś operacje na niej poprzez metode compile oraz link, które będą zarazem zakończeniem tej części wpisu.

 

Metoda compile wykonuje się przed metodą link co jest bardzo przydatne np. do wcześniejszego manipulowania drzewem HTML'a, a metoda link jest używana np. do rejestrowania zdarzeń.

Compile wykonuje się zanim dyrektywa dostanie swoje 'serce' i jeśli postanowimy go uzyć, wtedy metoda link jest ignorowana i aby ją używać, musimy ją wywołać z metody compile.

 

Popatrzmy na przykład wspólny:

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
  return {
    restrict: 'E',
    template: '<p>Lorem ipsum...<span></span></p>',
    link: function(scope, elem, attr) {
      elem.find('span').text('dodatkowy text');
    }
  };
});

Czy wpiszemy tam link czy compile, wynik będzie taki sam: Demo

Jednak jeśli chcemy użyć obu metod możemy je zadeklarować następujuąco:

 

Info: Metoda compile nie przyjmuje parametru scope, przy czym metoda link przyjmuje więc hierarhia parametrów będzie inna jeśli zmieniemy nazwe pola z link na compile - patrz niżej.

var app = angular.module('myApp', []);

app.directive('mojaDyrektywa', function() {
  return {
    restrict: 'E',
    template: '<p>Lorem ipsum...<span></span></p>',
    compile: function(elem, attr) {
      elem.find('span').text('dodatkowy text');
      return function(scope, elem, attr) {
        elem.on('click', function() {
          alert('Jestem klikalny!');
        });
      };
    }
  };
});

Ta część jest chyba najbardziej skomplikowana jak na pierwszy raz.

 

Demo

 

Konkluzja

 

Na tą chwilę mamy już jakieś pojęcie o konfigurowaniu naszej dyrektywy (chociaż to o wiele za mało). Więcej opcji opiszę w osobnym temacie, który będzie kontynuacją. Mam nadzieje że jest to czytelne a wszelkie błędy proszę zgłaszać albo w temacie (przede wszystkim pytania odnośnie tego co napisałem :D), albo prywatnie. Dziękuje za uwagę. Zapraszam wkrótce na kolejną część!

 

Pozdrawiam!


  • 3

2ed58r7.png






Również z jednym lub większą ilością słów kluczowych: angular, angularjs, dyrektywa, directive, ng, tutorial

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych