Yeoman

Mam na mysli jakieś bazy typu użytkownicy, produkty, państwa, miejscowości etc.

Projekt, który chcę stworzyć nie będzie jakis specyficzny pod kątem bazy danych. Chciałbym po prostu miec czym zapełnić stronę demonstracyjną Może po prostu pociągne sobie z API githuba jakieś dane

// Edit

Znalazłem: http://www.json-generator.com/ - można ustawić ile ma razy powtarzać dane i gitarka

<img 
    title="Fajny obrazek" 
    src="http://placehold.it/100x100" 
    data-placement="left" 
    data-toggle="tooltip" />

Kod PHP musisz wrzucić pomiędzy znaczniki <?php   echo 'jakiś text';   ?>  Dodatkowo plik musi mieć rozszerzenie .php - tak jak wspomniał writen

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

Ś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 ), albo prywatnie. Dziękuje za uwagę. Zapraszam wkrótce na kolejną część!

Pozdrawiam!

Zamiast label { display: none; } daj #slideLabel { display: none; }

Zdaje się że znak $ miał jakiś konflikt w kodzie. To http://codepen.io/anon/pen/tBzfJ - powinno u Ciebie działać, bo mi zadziałało jak wykonałem to u Ciebie na stronie.

Po prostu podmień kod JS i będzie dobrze.

Sprawdź jeszcze to: http://codepen.io/anon/pen/tBzfJ a jeśli nie zadziała to sprawdz w konsoli [F12] czy masz jakieś błędy.

Jesli usuniesz 'kropki' to nie zadziała, ponieważ podpiąłem sie pod nie. Ukryć możesz kropki poprzez display: none; i zmienić ID dla nich.

Demo: http://codepen.io/anon/pen/qLtay

Pomiędzy:

<script></script>

http://codepen.io/anon/pen/gziBd

Mogę dodać: bezstratna kompresja obrazków oraz niezałączania mniejszych skryptów JS jako script:src, a bezpośrednio w dokumencie.

http://jsfiddle.net/jmwubss6/2/ - o takie coś Ci chodzi ? // Tak do pierwszego posta

Dziwnie tłumaczysz troche. Najpierw masz problem z JS i ze zmianą klasy, a teraz nam piszesz ze pozycjonowanie elementu.

Ty pewnie chciałbyś cos takiego : http://jsfiddle.net/jmwubss6/3/ ale z tego co mi sie pamięta to pomiędzy LI się nie robi html'a a jedynie w nich.

Co do Twojego przykładu to: http://jsfiddle.net/mhndkdvv/4/

Widziałem, pewnie.

$(this).closest('li.user').next().toggleClass('klasa');

Nie powinno mieć problemów. Ten kod na jsfidle przy większej ilości takich <li>, nie będzie działał. Musisz wyjść z this (jesli efekt koncowy ma być odpalany tylko na jednym elemencie)

A może kurde jest komuś trudno to przeczytać i ogarnąć ? Postawcie się w innej pozycji niż wasza. To też nic trudnego.

Może popatrz w kod źródłowy ? Pewnie bedzie tam jakaś ramka z adresem.

W sumie już nie długo. Przygotowuje troszkę dłuższy temat więc troche to trwa. W przyszłym tygodniu już chciałbym to ogarnąć. Poza tym fajnie że ktoś się tym zaciekawił