Directives AngularJS

AngularJS étend le HTML avec de nouveaux attributs appelés Directives.

AngularJS ajoute des fonctionnalités à votre application via des directives intégrées.

AngularJS vous permet de personnaliser les directives.

Directives AngularJS

Les directives AngularJS sont des attributs HTML étendus préfixés par ng-. La directive

ng-app initialise une application AngularJS. La directive

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

ng-model lie une valeur d'élément (telle que la valeur d'un champ de saisie) à l'application.

Pour des instructions complètes, veuillez vous référer au manuel de référence AngularJS.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La directive

ng-app indique à AngularJS que l'élément <div> est le "propriétaire" de l'application AngularJS.

Une page Web peut contenir plusieurs applications AngularJS s'exécutant dans différents éléments.

	一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

Liaison de données

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

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

{{ firstName }} est synchronisé via ng-model="firstName".

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

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-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>

</body>
</html>

Run instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Utiliser

	使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

ng-init<🎜> Pas très courant. Vous découvrirez une meilleure façon d'initialiser les données dans le chapitre Contrôleurs.

La directive

Répéter l'élément HTML

ng-repeat répétera un élément HTML :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne instance

AngularJS prend parfaitement en charge les applications de base de données CRUD (ajouter Créer, lire Lire, mettre à jour Mettre à jour, supprimer Supprimer).

	AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。

Considérez les objets d'une instance comme des enregistrements dans une base de données.

Directive

ng-app La directive

ng-app définit l'élément racine d'une application AngularJS. La commande

ng-app démarre automatiquement (initialise automatiquement) l'application lorsque la page Web est chargée.

Plus tard, vous apprendrez comment ng-app se connecte à un module de code via une valeur (telle que ng-app="myModule").

directive ng-init La directive

ng-init définit une valeur initiale pour une application AngularJS.

Normalement, ng-init n'est pas utilisé. Vous utiliserez un contrôleur ou un module à sa place.

Vous en apprendrez plus sur les contrôleurs et les modules plus tard.

directive ng-model

directive ng-model Lie l'élément HTML aux données de l'application. La directive

ng-model peut également :

Fournir une validation de type (numéro, email, obligatoire) pour les données d'application.
Indiquez le statut (invalide, sale, touché, erreur) des données d'application.
Fournit des classes CSS pour les éléments HTML.
Liez des éléments HTML aux formulaires HTML. La

directive ng-repeat

la directive ng-repeat clonera l'élément HTML une fois.

Créer des 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 .directive pour ajouter des directives personnalisées.

Pour appeler une commande personnalisée, le nom de la commande personnalisée doit être ajouté à l'élément HTML.

Utilisez la casse camel pour nommer une directive, phpDirective, mais lorsque vous l'utilisez, vous devez la diviser avec -, php-directive :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Vous pouvez appeler la directive de la manière suivante :

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

Les exemples de méthodes suivants peuvent également générer le même résultat :

Nom de l'élément

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance

Propriétés

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Nom de la classe

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

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

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Commentaires

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<!-- directive: php-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Restrictions En utilisant

, vous pouvez restreindre vos commandes pour qu'elles ne soient appelées que de manière spécifique.

instances de

en ajoutant l'attribut restrict et en définissant la valeur sur "A", Pour définir la commande, elle ne peut être appelée que via les attributs :

Instance

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur " Exécuter le bouton « Instance » pour afficher des exemples en ligne

restrict La valeur peut être la suivante :

E comme nom d'élément, utilisez
A comme attribut, utilisez
C comme nom de classe, utilisez
M est utilisé comme commentaire

restrict La valeur par défaut est EA, c'est-à-dire que la directive peut être appelée via le. nom de l'élément et nom de l'attribut.

Directives AngularJS

Directives AngularJS

Instance

Liaison de données

Exemple

Répéter l'élément HTML

Instance

Instance

ng-app La directive

directive ng-init La directive

directive ng-model

directive ng-repeat

Créer des directives personnalisées

Instance

Instance

Instance

Instance

Instance

Restrictions En utilisant

instances de

Instance

Site Web PHP chinois