AngularJS Directives

AngularJS, au moyen de ce qu'on appelledirectivesde nouveaux attributs pour étendre HTML.

AngularJS ajoute des fonctionnalités aux applications via des directives intégrées.

AngularJS vous permet de définir des directives personnalisées.

Directives AngularJS

Les directives AngularJS sont des attributs HTML étendus avec un préfixe.ng-。

ng-appLa directive initialise une application AngularJS.

ng-initLa directive initialise les données de l'application.

ng-modelLa directive lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application.

Pour obtenir le contenu complet des directives, reportez-vous auManuel de référence AngularJS。

Exemple AngularJS

<div ng-app="" ng-init="firstName='John'"> <p>Essayez de saisir dans le champ de saisie :</p> <p>Nom :<input type="text" ng-model="firstName"></p> <p>Ce que vous avez saisi est : {{ firstName }}</p> </div>

Essayez-le vous-même »

ng-appLa directive indique à AngularJS que l'élément <div> est le 'propriétaire' de l'applicationAngularJS.

Liaison de données

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

La liaison de données dans AngularJS synchronise les expressions AngularJS avec les données AngularJS.

{{ firstName }}C'est parng-model="firstName"que la synchronisation est effectuée.

Dans l'exemple suivant, deux champs de texte sont synchronisés à l'aide de deux directives ng-model :

Exemple AngularJS

<div ng-app="" ng-init="quantity=1;price=5"> <h2>Calculateur de prix</h2>Quantité :<input type="number" ng-model="quantity">Prix :<input type="number" ng-model="price"> <p><b>Total :</b> {{ quantity * price }}</p> </div>

Essayez-le vous-même »

Note L'utilisation deng-initn'est pas très courante. Vous apprendrez une meilleure façon d'initialiser les données dans le chapitre sur les contrôleurs.

Répétition d'éléments HTML

ng-repeatLa directive répète un élément HTML :

Exemple AngularJS

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>Utiliser ng-repeat pour parcourir un tableau</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

Essayez-le vous-même »

ng-repeatLa directive est utilisée sur un tableau d'objets :

Exemple AngularJS

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>Parcourir les objets :</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>

Essayez-le vous-même »

Note AngularJS prend parfaitement en charge les applications CRUD (Créer, Lire, Mettre à jour, Supprimer) de base de données.
Considérez les objets de l'exemple comme des enregistrements dans une base de données.

Directive ng-app

ng-appLa directive définit l'élément racine de l'application AngularJS.。

ng-appLa directive, une fois la page chargée,amorcera automatiquement(initialisera automatiquement) l'application.

Plus tard, vous apprendrezng-appcomment vous connecter à un module de code à l'aide d'une valeur (telle que ng-app="myModule").

Directive ng-init

ng-initLa directive définit pour l'application AngularJSdes valeurs initiales.。

Habituellement, ng-init n'est pas utilisé. Vous utiliserez plutôt un contrôleur ou un module.

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

Directive ng-model

ng-modelLa directivelie les éléments HTMLaux données de l'application.

ng-modelLes directives peuvent également :

  • Fournir une validation de type pour les données de l'application (number, email, required).
  • Fournir un état pour les données de l'application (invalid, dirty, touched, error).
  • Fournir des classes CSS pour les éléments HTML.
  • Lier des éléments HTML à des formulaires HTML.

Directive ng-repeat

ng-repeatPour chaque élément d'une collection (tableau), la directive vaCloner l'élément HTML une fois.。


Création de directives personnalisées

En plus des directives intégrées d'AngularJS, nous pouvons également créer des directives personnalisées.

Vous pouvez utiliser la fonction.directivepour ajouter des directives personnalisées.

Pour invoquer une directive personnalisée, vous devez ajouter le nom de la directive personnalisée à l'élément HTML.

Utilisez camelCase pour nommer une directive, exampleDirective, mais lorsque vous l'utilisez, vous devez-le séparer avec -,example-directive:

Exemple AngularJS

<body ng-app="myApp">

<example-directive></example-directive>

<script>
var app = angular.module("myApp", []);
app.directive("exampleDirective", function() {
    return {
template : "<h1>directive personnalisée !</h1>"
    };
});
</script>

</body>

Essayez-le vous-même »

Vous pouvez invoquer une directive des manières suivantes :

  • Nom de l'élément
  • Attribut
  • Nom de classe
  • Commentaire

Les exemples suivants peuvent également produire le même résultat :

Nom de l'élément

<example-directive></example-directive>

Essayez-le vous-même »

Attribut

<div example-directive></div>

Essayez-le vous-même »

Nom de classe

<div class="example-directive"></div>

Essayez-le vous-même »

Commentaire

<!-- directive: example-directive -->

Essayez-le vous-même »

Restrictions d'utilisation

Vous pouvez restreindre votre directive afin qu'elle ne puisse être invoquée que par des méthodes spécifiques.

Exemple

En ajoutant l'attributrestrictet en définissant sa valeur sur"A", pour définir la directive afin qu'elle ne puisse être invoquée que par attribut :

var app = angular.module("myApp", []);
app.directive("exampleDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Directive personnalisée !</h1>"
    };
});

Essayez-le vous-même »

restrictLa valeur peut être l'une des suivantes :

  • EUtilisé comme nom d'élément
  • AUtilisé comme attribut
  • CUtilisé comme nom de classe
  • MUtilisé comme commentaire

restrictLa valeur par défaut estEA, ce qui signifie que la directive peut être invoquée par le nom de l'élément et le nom de l'attribut.

Autres extensions