Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS dyrektywy

❮ Poprzedni Następny Rozdział ❯

Angularjs pozwala przedłużyć HTML z nowymi atrybutami zwanych dyrektyw.

Angularjs posiada zestaw wbudowanych dyrektyw, które oferuje funkcjonalność aplikacji.

Angularjs pozwala również definiować własne wskazówki.

angularjs dyrektywy

Angularjs dyrektyw są rozszerzone atrybuty HTML z prefiksem ng- .

ng-app dyrektywy inicjuje angularjs aplikację.

ng-init dyrektywy inicjuje dane aplikacji.

ng-model Dyrektywa wiąże wartość kontroli HTML (input, select, textarea) do danych aplikacji.

Przeczytaj o wszystkich angularjs dyrektyw w naszych angularjs dyrektywy referencyjnych .

Przykład

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
Spróbuj sam "

ng-app Dyrektywa mówi także angularjs że element <div> jest "właścicielem" aplikacji angularjs.

Wiązanie danych

{{ firstName }} wyraz w powyższym przykładzie, stanowi daną angularjs wyrażenie wiążące.

Dane wiąże w angularjs wiąże angularjs wyrażeń z danymi angularjs.

{{ firstName }} jest związany z ng-model="firstName" .

W następnym przykładzie są dwa pola tekstowe ze sobą połączone z dwóch dyrektyw 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>
Spróbuj sam "
Uwaga Korzystanie ng-init nie jest bardzo powszechne. Dowiesz się, jak zainicjować danych w rozdziale o kontrolerach.

Powtarzanie elementów HTML

ng-repeat dyrektywa powtarza elementu HTML:

Przykład

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
Spróbuj sam "

ng-repeat dyrektywa ta faktycznie klonuje elementy HTML raz dla każdego elementu w kolekcji.

ng-repeat dyrektywa stosowana 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>
Spróbuj sam "
Uwaga Angularjs jest idealny dla CRUD (tworzenie bazy Przeczytaj Aktualizuj Delete) aplikacji.
Wystarczy wyobrazić sobie, jeśli obiekty te były rekordy z bazy danych.

Dyrektywa ng-app

ng-app Dyrektywa definiuje element główny danego angularjs aplikacji.

ng-app dyrektywa będzie auto-ładujący (automatycznie zainicjować) aplikację, gdy strona jest ładowana.

Dyrektywa ng-startowych

ng-init Dyrektywa definiuje wartości początkowe dla angularjs aplikacji.

Normalnie, nie użyje NG-Init. Będziesz korzystać z kontrolera lub modułu zamiast.

Dowiesz się więcej na temat sterowników i modułów później.

Dyrektywa ng model

ng-model Dyrektywa wiąże wartość kontroli HTML (input, select, textarea) do danych aplikacji.

ng-model dyrektywa może także:

  • Zapewnienie poprawności typu dla danych aplikacji (numer, e-mail jest wymagany).
  • Informuje o stanie danych aplikacji (nieważne, brudne, dotknął, błąd).
  • Zapewnienie klas CSS dla elementów HTML.
  • Bind elementy HTML do formularzy HTML.

Czytaj więcej o ng-model dyrektywy w następnym rozdziale.

Tworzenie nowych dyrektyw

Ponadto dla wszystkich dyrektyw wbudowane angularjs, można tworzyć własne wskazówki.

Nowe wytyczne są tworzone za pomocą .directive funkcję.

Aby wywołać nową dyrektywę, aby element HTML z tej samej nazwie znacznika jako nowej dyrektywy.

Podczas nazywania dyrektywę, należy użyć nazwy liter wielbłąda, w3TestDirective , ale podczas wywoływania go, należy użyć - oddzielone nazwę, 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>
Spróbuj sam "

Można powołać się na dyrektywę za pomocą:

  • Nazwa elementu
  • Atrybut
  • Klasa
  • Komentarz

Poniższe przykłady wszystkie ten sam wynik:

Nazwa elementu

<w3-test-directive></w3-test-directive>
Spróbuj sam "

Atrybut

<div w3-test-directive></div>
Spróbuj sam "

Klasa

<div class="w3-test-directive"></div>
Spróbuj sam "

Komentarz

<!-- directive: w3-test-directive -->
Spróbuj sam "

ograniczenia

Można ograniczyć dyrektyw się powoływać tylko niektóre z metod.

Przykład

Dodając restrict właściwość z wartością "A" , dyrektywa może być wywoływany tylko przez atrybuty:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});
Spróbuj sam "

Prawne ograniczające są następujące wartości:

  • E o nazwie Element
  • Atrybutu
  • C dla klasy
  • M za komentarz

Domyślnie wartość jest EA , co oznacza, że obie nazwy nazw elementów i atrybutów może powoływać się na dyrektywę.


❮ Poprzedni Następny Rozdział ❯