Latest web development tutorials

AngularJS direttive

La nuova proprietà viene chiamata da direttive AngularJS per estendere HTML.

AngularJS istruzioni incorporate per l'applicazione per aggiungere funzionalità.

AngularJS consente di personalizzare l'istruzione.

AngularJS direttive

AngularJS istruzione è un'estensione di attributi HTML con il ng- prefisso.

istruzioni ng-app per inizializzare un applicazione AngularJS.

comando ng-init per inizializzare i dati delle applicazioni.

ng-modello di comando i valori degli elementi (come il valore del campo di ingresso) legati all'applicazione.

Le istruzioni complete si possono trovare in il contenuto del manuale di riferimento AngularJS .

AngularJS esempi

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

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

</div>

Prova »

direttiva ng-app dice AngularJS, <div> elemento è l'applicazione AngularJS del "proprietario".

nota Una pagina Web può contenere più applicazioni AngularJS esecuzione di elementi diversi.

Data Binding

Nell'esempio precedente {{firstName}} espressione AngularJS è un'espressione di associazione dati.

AngularJS associazioni di dati, sincronizzato con AngularJS AngularJS dati di espressione.

{{FirstName}} da NG-model = sincronizzazione "Nome".

Nel prossimo esempio, due campo di testo viene calcolata tramite ng-modello di istruzione di due sincronizzazione:

AngularJS esempi

<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>

Prova »

nota Utilizzare ng-init non è molto comune. Si impara a essere un modo migliore per inizializzare i dati nel capitolo controller.

elementi HTML Ripetere

istruzioni ng-repeat ripete un elemento HTML:

AngularJS esempi

<Div ng-app = "" ng-init = "nomi = [ 'Jani', 'Hege', 'Kai']">
<P> Usa ng-repeat per scorrere la matrice </ p>
<Ul>
<Li ng-repeat = "x nei nomi">
{{X}}
</ Li>
</ Ul>
</ Div>

Prova »

istruzioni ng-repeat viene utilizzata in un array di oggetti:

AngularJS esempi

<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>

Prova »

nota AngularJS CRUD perfetta database di supporto (aumentare creare, leggere Read, Update Update, Delete Elimina) le applicazioni.
Pensate di esempi di oggetti in record nel database.

direttiva ng-app

direttiva ng-app definisce la radice dell'applicazione elemento AngularJS.

istruzioni ng-app quando la pagina viene caricata automaticamente avviati applicazioni (inizializzazione automatica).

Più avanti si imparerà a ng-app da un valore (ad esempio, ng-app = "MyModule") collegato al modulo di codice.

ng-init comando

ng-init applicazione AngularJS istruzione definisce il valore iniziale.

In circostanze normali, non utilizzare ng-init. Si utilizzerà un controller o di un modulo di sostituirlo.

Più tardi si impara di più sui controller e moduli.

direttiva ng-modello

ng-modello di elementi direttiva legano HTML ai dati delle applicazioni.

direttiva ng-modello può anche:

  • Fornire la verifica del tipo di dati di applicazione (numero, e-mail, richiesto).
  • Fornisce stato per i dati delle applicazioni (non validi, sporco, toccato, errore).
  • Fornire classi CSS per gli elementi HTML.
  • elementi HTML legarsi al modulo HTML.

ng-repeat istruzioni

istruzioni ng-repeat per la raccolta (array) di ogni articolo sarà clonare un elemento HTML.


Creazione di un comando personalizzato

AngularJS Oltre alle istruzioni incorporate, possiamo anche creare comandi personalizzati.

.directive funzione è possibile utilizzare per aggiungere comandi personalizzati.

Per chiamare un comando personalizzato, è necessario aggiungere un nome di comando personalizzato sull'elemento HTML.

Utilizzare il metodo gobba per citarnedirettiva, w3bigDirective, ma quando si ha bisogno di usarlo -la segmentazione, w3big-direttiva:

AngularJS esempi

<Corpo ng-app = "myApp ">

<W3big-direttiva> </ w3big -Direttiva>

<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
tornare {
template: "<h1> Istruzioni </ h1>!"
};
});
</ Script>

</ Corpo>

Prova »

È possibile chiamare l'istruzione nei seguenti modi:

  • nome dell'elemento
  • proprietà
  • Il nome della classe
  • nota

La seguente titolo di esempio può produrre lo stesso risultato:

nome dell'elemento

<W3big-direttiva> </ w3big -Direttiva>

Prova »

proprietà

<Div w3big-direttiva> </ div>

Prova »

Il nome della classe

<Div class = "w3big-direttiva "> </ div>

Prova »

nota

<- Istruzioni :! W3big-direttiva ->

Prova »

Restrizioni per l'uso

È possibile limitare la vostra istruzione può essere invocato solo da un modo particolare.

Esempi

Con l'aggiunta dilimitare proprietà e impostare il valore unico "A" , per impostare il comando può essere chiamato solo a titolo di proprietà:

var app = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
tornare {
limitare: "A",
template: "<h1> Istruzioni </ h1>!"
};
});

Prova »

limitare valore può essere il seguente:

  • E viene usato come nome dell'elemento
  • A uso come attributo
  • C viene usato come il nome della classe
  • M come un commento

limitare default è EA , che può essere richiamato dal elemento di comando e nomi degli attributi.