Latest web development tutorials

angularjs dyrektyw

Nowa właściwość jest wywoływana przez angularjs dyrektyw przedłużyć HTML.

Angularjs wbudowane instrukcje dla aplikacji, aby dodać funkcjonalność.

Angularjs pozwala dostosować instrukcji.

angularjs dyrektyw

Angularjs instrukcja jest rozszerzeniem atrybutów HTML z ng-prefix.

Instrukcje ng-app zainicjować angularjs aplikację.

Komenda ng-init zainicjować danych aplikacji.

ng model dowodzić wartości elementu (takich jak wartość pola wejściowego) związanych z aplikacją.

Pełne instrukcje można znaleźć w treści angularjs podręcznika .

angularjs przykłady

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

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

Spróbuj »

Dyrektywa ng-app mówi angularjs <div> jest angularjs stosowanie "właściciela".

uwaga Strona internetowa może zawierać wiele angularjs uruchamiania aplikacji w różnych elementach.

Wiązanie danych

W powyższym przykładzie {{}} angularjs firstName wyrażenie jest wyrażeniem wiązania danych.

Angularjs powiązania danych, zsynchronizowane z angularjs angularjs danych ekspresji.

{{FirstName}} od modelu NG = "firstName" synchronizacji.

W następnym przykładzie, dwa pola tekstowego jest obliczana poprzez dwa synchronizacji instrukcji NG-modelu:

angularjs przykłady

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

Spróbuj »

uwaga Korzystanie ng-startowy nie jest bardzo częste. Dowiesz się być lepszym sposobem, aby zainicjować dane w rozdziale kontrolera.

Powtórz elementy HTML

ng-repeat Instrukcja powtarza elementu HTML:

angularjs przykłady

<Div ng-app = "" NG-startowych = "nazwa = [ 'Jani", "Hege", "Kai"] ">
<P> Użyj ng-powtarzanie pętli tablicy </ p>
<Ul>
<Li ng-repeat = "x w nazwach">
{{X}}
</ Li>
</ Ul>
</ Div>

Spróbuj »

ng powtarzania instrukcja jest używana w układzie obiektów:

angularjs przykłady

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Spróbuj »

uwaga Angularjs CRUD doskonała baza wsparcia (wzrost tworzyć, czytać, czytać aktualizacji Update, Delete) Usuwanie aplikacji.
Pomyśl o przykłady obiektów do rekordów w bazie danych.

Dyrektywa ng-app

Dyrektywa ng-app definiuje aplikację angularjs elementu głównego.

Instrukcje ng-app, gdy strona jest ładowany automatycznie uruchomiony (automatyczna inicjalizacja) wnioski.

Później dowiesz się jak NG-app przez wartość (na przykład, NG-app = "mymodule") podłączonego do modułu kodu.

ng-startowych polecenie

ng inicjalizacji zastosowanie angularjs instrukcja określa wartość początkową.

W normalnych okolicznościach nie używać NG-Init. Będziesz korzystać z kontrolera lub modułu, aby go zastąpić.

Później dowiesz się więcej na temat sterowników i modułów.

Dyrektywa ng model

ng model elementów dyrektywy wiążą HTML do danych aplikacji.

Dyrektywa ng-model może również:

  • Zapewnienie weryfikacji danych typu aplikacji (numer, poczty elektronicznej, wymagane).
  • Zapewnia statusu dla danych aplikacji (nieważne, brudne, dotknął, błąd).
  • Zapewnienie klas CSS dla elementów HTML.
  • Bind elementy HTML do postaci HTML.

ng-repeat Instrukcja

ng-repeat instrukcja dla zbierania (array) każdego elementu będzie sklonować elementu HTML.


Tworzenie polecenia niestandardowego

Angularjs dodatkiem do wbudowanych instrukcji, możemy również tworzyć niestandardowe polecenia.

.directive funkcji można użyć, aby dodać niestandardowe polecenia.

Aby połączyć się z polecenia niestandardowego, trzeba dodać niestandardową nazwę polecenia na elemencie HTML.

Użyj metody garb nazwaćdyrektywa, w3bigDirective, ale kiedy trzeba go używać -segmentacja, w3big dyrektywą:

angularjs przykłady

<Body ng-app = "myApp ">

<W3big dyrektywą> </ w3big -Dyrektywa>

<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
powrót {
Szablon: "<h1> instrukcji </ h1>!"
};
});
</ Script>

</ Body>

Spróbuj »

Możesz zadzwonić do instrukcji w jeden z następujących sposobów:

  • Nazwa elementu
  • nieruchomość
  • Nazwa klasy
  • uwaga

Poniższy tytułem przykładu może wyprowadzać taki sam wynik:

Nazwa elementu

<W3big dyrektywą> </ w3big -Dyrektywa>

Spróbuj »

nieruchomość

<Div w3big dyrektywą> </ div>

Spróbuj »

Nazwa klasy

<Div class = "w3big dyrektywą "> </ div>

Spróbuj »

uwaga

<- Instruction :! W3big dyrektywą ->

Spróbuj »

Ograniczenia w stosowaniu

Można ograniczyć swoją instrukcja może być wywoływany tylko przez określony sposób.

Przykłady

Dodającograniczyć własność i ustawić wartość tylko "A" , aby ustawić polecenia można nazwać jedynie tytułem własności:

var app = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
powrót {
ograniczenie: "a",
Szablon: "<h1> instrukcji </ h1>!"
};
});

Spróbuj »

ograniczyć wartość może być następująca:

  • E jest wykorzystywana jako nazwa elementu
  • Zastosowanie jako atrybut
  • C jest wykorzystywana jako nazwa klasy
  • M jako komentarz

ograniczyć domyślnym jest EA , który może być wywołany przez element komend i nazw atrybutów.