Dyrektywy AngularJS
AngularJS pozwala rozszerzyć HTML o nowe atrybuty zwane dyrektywami .
AngularJS ma zestaw wbudowanych dyrektyw, które oferują funkcjonalność Twoim aplikacjom.
AngularJS pozwala również zdefiniować własne dyrektywy.
Dyrektywy AngularJS
Dyrektywy AngularJS to rozszerzone atrybuty HTML z przedrostkiem ng-.
Dyrektywa ng-appinicjuje aplikację AngularJS.
Dyrektywa ng-initinicjuje dane aplikacji.
Dyrektywa ng-modelwiąże wartość kontrolek HTML (input, select, textarea) z danymi aplikacji.
Przeczytaj o wszystkich dyrektywach AngularJS w naszej dokumentacji dotyczącej dyrektyw AngularJS .
Przykład
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Dyrektywa ng-appmówi również AngularJS, że element <div> jest „właścicielem” aplikacji AngularJS.
Wiązanie danych
Wyrażenie {{ firstName }}w powyższym przykładzie jest wyrażeniem powiązania danych AngularJS.
Powiązanie danych w AngularJS wiąże wyrażenia AngularJS z danymi AngularJS.
{{ firstName }}jest związany z ng-model="firstName".
W następnym przykładzie dwa pola tekstowe są powiązane razem z dwiema dyrektywami ng-model:
Przykład
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Używanie ng-initnie jest zbyt powszechne. Jak inicjować dane dowiesz się z rozdziału o kontrolerach.
Powtarzające się elementy HTML
Dyrektywa ng-repeatpowtarza element HTML:
Przykład
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Dyrektywa ng-repeatfaktycznie klonuje elementy HTML
raz dla każdego elementu w kolekcji.
Dyrektywa ng-repeatużyta na tablicy obiektów:
Przykład
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS jest idealny dla aplikacji bazodanowych CRUD (Create Read Update Delete).
Wyobraź sobie, że te obiekty byłyby rekordami z bazy danych.
Dyrektywa dotycząca aplikacji
Dyrektywa ng-appdefiniuje główny element aplikacji AngularJS.
Dyrektywa ng-appautomatycznie załaduje (automatycznie zainicjuje) aplikację po załadowaniu strony internetowej.
Dyrektywa Cieplna
Dyrektywa ng-initdefiniuje początkowe wartości dla aplikacji AngularJS.
Normalnie nie będziesz używać ng-init. Zamiast tego użyjesz kontrolera lub modułu.
Więcej o kontrolerach i modułach dowiesz się później.
Dyrektywa modelowa
Dyrektywa ng-modelwiąże wartość kontrolek HTML (input, select, textarea) z danymi aplikacji.
Dyrektywa ng-modelmoże również:
- Podaj walidację typu danych aplikacji (numer, adres e-mail, wymagane).
- Podaj stan danych aplikacji (nieprawidłowe, brudne, dotknięte, błąd).
- Podaj klasy CSS dla elementów HTML.
- Powiąż elementy HTML z formularzami HTML.
Przeczytaj więcej o ng-modeldyrektywie w następnym rozdziale.
Twórz nowe dyrektywy
Oprócz wszystkich wbudowanych dyrektyw AngularJS możesz tworzyć własne dyrektywy.
Za pomocą .directivefunkcji tworzy się nowe dyrektywy.
Aby wywołać nową dyrektywę, utwórz element HTML z taką samą nazwą znacznika jak nowa dyrektywa.
Nazywając dyrektywę, musisz użyć nazwy wielbłąda
w3TestDirective, ale przy jej wywoływaniu musisz użyć -oddzielnej nazwy, w3-test-directive:
Przykład
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Dyrektywę można wywołać za pomocą:
- Nazwa elementu
- Atrybut
- Klasa
- Komentarz
Wszystkie poniższe przykłady dadzą ten sam wynik:
Nazwa elementu
<w3-test-directive></w3-test-directive>
Atrybut
<div w3-test-directive></div>
Klasa
<div class="w3-test-directive"></div>
Komentarz
<!-- directive: w3-test-directive -->
Ograniczenia
Możesz ograniczyć swoje dyrektywy do wywoływania tylko przez niektóre metody.
Przykład
Dodając restrictwłaściwość o wartości "A", dyrektywa może być wywołana tylko przez atrybuty:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Prawne wartości graniczne to:
Edla nazwy elementuAdla atrybutuCdla klasyMdla komentarza
Domyślną wartością jest EA, co oznacza, że zarówno nazwy elementów, jak i nazwy atrybutów mogą wywoływać dyrektywę.