AngularJS 自定义指令

En utilisant des instructions personnalisées pour étendre les fonctionnalités de HTML dans AngularJS. Définir les instructions personnalisées en utilisant la fonctionnalité "instruction" Les instructions personnalisées ne remplacent que les éléments activés. Pendant l'initiation, l'application AngularJS trouve les éléments correspondants et utilise leurscompile()La méthode de l'instruction custom agit une fois, puislink()Utiliser la méthode de l'instruction custom pour traiter cet élément selon la portée de l'instruction. AngularJS prend en charge la création de instructions personnalisées pour les types d'éléments suivants.

Instruction élément − Lorsque l'élément correspondant est rencontré, l'instruction est activée.
Attribut − Lorsque l'attribut correspondant est rencontré, l'instruction est activée.
CSS − Lorsque le style CSS correspondant est rencontré, l'instruction est activée.
Annotation − Lorsque l'annotation correspondante est rencontrée, l'instruction est activée.

Comprendre les instructions personnalisées

Définir une balise html personnalisée.

<student name="Sea"></student><br/><student name = "Piyush"></student>

Définir une instruction personnalisée pour traiter les balises html personnalisées ci-dessus.

var mainApp = angular.module("mainApp", []);
//Créer une instruction, le premier paramètre est l'élément html à attacher.	　　
//Nous attachons les balises html des étudiants.　
//Une fois qu'il est rencontré n'importe quel élément Student dans html, cette instruction sera activée
mainApp.directive('student', function() {
　　　//Définir l'objet d'instruction
　　　var directive = {};
　　　
　　　//limit = E, ce qui signifie que cette instruction est une instruction Element
　　　directive.restrict = 'E';
　　　
　　　//Le modèle remplace l'élément complet par son texte.　
　　　directive.template = "Élève : <b>{{student.name}}</b>\t,　
　　　　　　Numéro de Roll: <b>{{student.rollno}}</b>/b>";
　　　
　　　//La portée est utilisée pour distinguer chaque élément d'étudiant selon les conditions.
　　　directive.scope = {
　　　　　　student : "=name"
　　　}
　　　
　　　//compile est appelé pendant l'initialisation de l'application. AngularJS appelle　
　　　　　　it une fois lorsque la page html est chargée.
　　　directive.compile = function(element, attributes) {
　　　　　　element.css("border", ""1px solide \#cccccc\
　　　　　　
　　　　　　//linkFunction lie chaque élément avec une portée pour obtenir des données spécifiques à l'élément.
　　　　　　var linkFunction = function($scope, element, attributes) {
　　　　　　　　　element.html("Élève : \u00ab"+$scope.student.name　+"</b>\t,　
　　　　　　　　　　　　Numéro de Roll : <b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　}
　　　　　　return　linkFunction;
　　　}
　　　
　　　return　directive;
});

Définir le contrôleur pour mettre à jour la portée de l'instruction. Ici, nous utilisons la valeur de l'attribut name comme sous-niveau de portée.

mainApp.controller('StudentController',　function($scope)　{
　　　$scope.Sea　=　{};
　　　$scope.Sea.name　=　"Sea　Gull";
　　　$scope.Sea.rollno　　=　1;
　　　
　　　$scope.Piyush　=　{};
　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　$scope.Piyush.rollno　　=　2;
});

Exemple en ligne

Exemple

<html>
　　　<head>
　　　　　　<title>AngularJS-Instruction personnalisée</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Exemple d'instruction personnalisée</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="StudentController">
　　　　　　　　　<student name="Sea"></student><br/>
　　　　　　　　　<student name="Piyush"></student>
　　　　　　</div>
　　　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.directive('student', function() {
　　　　　　　　　　　　var directive = {};
　　　　　　　　　　　　directive.restrict = 'E';
　　　　　　　　　　　　directive.template = "Élève : <b>{{student.name}}</b>\t, Numéro de Roll : <b>{{student.rollno}}</b>";
　　　　　　　　　　　　
　　　　　　　　　　　　directive.scope = {
　　　　　　　　　　　　　　　student : "=name"
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　directive.compile = function(element, attributes) {
　　　　　　　　　　　　　　　element.css("border", ""1px solide \#cccccc\
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　var linkFunction = function($scope, element, attributes) {
　　　　　　　　　　　　　　　　　　element.html("Élève : \u00ab"+$scope.student.name　+"</b>　,　Roll　No:　<b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　return　linkFunction;
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　return　directive;
　　　　　　　　　});
　　　　　　　　　
　　　　　　　　　mainApp.controller('StudentController',　function($scope)　{
　　　　　　　　　　　　$scope.Sea　=　{};
　　　　　　　　　　　　$scope.Sea.name　=　"Sea　Gull";
　　　　　　　　　　　　$scope.Sea.rollno　　=　1;
　　　　　　　　　　　　$scope.Piyush　=　{};
　　　　　　　　　　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　　　　　　　　　　$scope.Piyush.rollno　　=　2;
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网络浏览器中打开textAngularJS.htm。查看结果。

AngularJS 国际化 AngularJS 依赖注入

Tutoriel de base AngularJS

AngularJS 自定义指令

Comprendre les instructions personnalisées

Exemple en ligne