Latest web development tutorials

AngularJS directives

La nouvelle propriété est appelée par AngularJS directives pour étendre HTML.

AngularJS instructions intégrées pour l'application pour ajouter des fonctionnalités.

AngularJS vous permet de personnaliser l'instruction.

AngularJS directives

AngularJS instruction est une extension de HTML attributs avec le ng- préfixe.

instructions ng-app pour initialiser une application AngularJS.

commande ng-init pour initialiser les données d'application.

ng modèle commander les valeurs des éléments (tels que la valeur du champ d'entrée) liée à l'application.

Des instructions complètes peuvent être trouvées dans le contenu du manuel de référence AngularJS .

AngularJS exemples

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

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

</div>

Essayez »

directive ng-app dit AngularJS, élément <div> est l' application AngularJS du «propriétaire».

note Une page Web peut contenir plusieurs applications AngularJS d'exécution dans différents éléments.

liaison de données

Dans l'exemple ci - dessus {{firstName}} de l'expression est une expression de liaison de données.

AngularJS liaisons de données, synchronisées avec les données d'expression de AngularJS.

{{FirstName}} par ng-model = synchronisation "de firstName".

Dans l'exemple suivant, deux champ de texte est calculé par l'intermédiaire de deux synchronisation instruction ng-modèle:

AngularJS exemples

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

Essayez »

note Utilisez ng-init est pas très commun. Vous apprendrez à être une meilleure façon d'initialiser les données dans le chapitre sur le contrôleur.

éléments HTML Répéter

instruction ng répétition répète un élément HTML:

AngularJS exemples

<Div ng-app = "" ng-init = "noms = [ 'Jani', 'Hege', 'Kai']">
<P> Utiliser ng-répéter en boucle à travers le réseau </ p>
<Ul>
<Li ng-repeat = "x dans les noms">
{{X}}
</ Li>
</ Ul>
</ Div>

Essayez »

instruction ng-repeat est utilisé dans un tableau d'objets:

AngularJS exemples

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

Essayez »

note AngularJS CRUD base de données de support parfait (augmenter Créer, lire Read, Update Update, Delete Supprimer) applications.
Pensez à des exemples d'objets dans les enregistrements de la base de données.

directive ng-app

directive ng-app définit la racine application AngularJS élément.

instructions ng-app lorsque la page est chargée automatiquement démarrés (initialisation automatique) applications.

Plus tard , vous allez apprendre à ng-app par une valeur (par exemple, ng-app = "monModule") connecté au module de code.

ng-init commande

ng-init application AngularJS instruction définit la valeur initiale.

Dans des circonstances normales, ne pas utiliser ng-init. Vous allez utiliser un contrôleur ou d'un module pour le remplacer.

Plus tard, vous en apprendrez plus sur les contrôleurs et les modules.

directive ng-modèle

ng-modèle éléments directive bind HTML aux données d'application.

directive ng-modèle peut aussi:

  • Fournir la vérification du type de données d'application (nombre, email, obligatoire).
  • Fournit l'état pour les données d'application (invalide, sale, touché, erreur).
  • Fournir des classes CSS pour les éléments HTML.
  • éléments HTML Liez le formulaire HTML.

ng-repeat instruction

instruction ng-repeat pour la collecte (array) de chaque élément sera cloner un élément HTML.


Créer une commande personnalisée

AngularJS Outre les instructions intégrées, nous pouvons également créer des commandes personnalisées.

Fonction.directive vous pouvez utiliser pour ajouter des commandes personnalisées.

Pour appeler une commande personnalisée, vous devez ajouter un nom de commande personnalisée sur l'élément HTML.

Utiliser la méthode bosse pour nommer unedirective, w3bigDirective, mais quand vous avez besoin de l' utiliser -segmentation, w3big-directive:

AngularJS exemples

<Body ng-app = "myApp ">

<W3big-directive> </ w3big -Directive>

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

</ Body>

Essayez »

Vous pouvez appeler l'instruction de la manière suivante:

  • nom de l'élément
  • propriété
  • Le nom de la classe
  • note

Voici à titre d'exemple peut produire le même résultat:

nom de l'élément

<W3big-directive> </ w3big -Directive>

Essayez »

propriété

<Div w3big-directive> </ div>

Essayez »

Le nom de la classe

<Class Div = "w3big-directive "> </ div>

Essayez »

note

<- Instruction :! W3big-directive ->

Essayez »

Limitation de l'emploi

Vous pouvez limiter votre instruction ne peut être invoquée par une manière particulière.

Exemples

En ajoutant derestreindre la propriété et définir la valeur que "A" , pour définir la commande ne peut être appelée par le biais de la propriété:

var app = de angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
retour {
limiter: "A",
template: "<h1> Instruction </ h1>!"
};
});

Essayez »

restreindre la valeur peut être le suivant:

  • E est utilisé comme nom d'élément
  • A utiliser comme un attribut
  • C est utilisé comme nom de classe
  • M comme un commentaire

restreindre par défaut est EA , qui peut être invoqué par l'élément de commande et les noms d' attribut.