Fonction de lien directif dans AngularJS
Nous présenterons les directives et les fonctions de lien de directive dans AngularJS et passerons par des exemples pour les comprendre.
Lien directif en Angular
Les Directives sont les marqueurs d’éléments DOM qui indiquent à AngularJS d’étendre le HTML aux éléments DOM et à leurs enfants.
Dans AngularJS, la plupart des directives commencent par ng- où ng signifie Angular. Il existe de nombreuses directives intégrées dans AngularJS, et nous pouvons également créer des directives personnalisées pour notre application.
Certaines directives intégrées largement utilisées sont ng-app, ng-init, ng-model, ng-bind, etc.
Créons une nouvelle application AngularJS pour passer en revue un exemple de directives.
Dans un premier temps, nous allons ajouter la librairie AngularJS à l’aide de balises script.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Maintenant, nous allons définir l’application AngularJS en utilisant ng-app.
# AngularJs
<body ng-app="">
...
</body>
Ensuite, nous définirons un nom de modèle à l’aide de la directive ng-model et afficherons la valeur du modèle dans un div.
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
Production:
Testons-le en tapant la valeur.
Production:
Fonction de lien directif dans Angular
Parlons maintenant de la fonction de lien de directive dans Angular en passant par un exemple pour comprendre comment créer une directive personnalisée dans AngularJS.
Tout d’abord, nous allons définir notre modèle dans index.html, y compris la bibliothèque AngularJS, et définir l’application AngularJS à l’aide de ng-app="my-app". Dans notre application, nous décrirons le contrôleur qui sera exploité à l’aide de ng-controller="Controller".
Nous allons créer un div avec un lien de directive personnalisé langage de programmation à l’intérieur de notre contrôleur.
Notre code dans index.html ressemblera à ci-dessous.
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
Maintenant, dans script.js à l’intérieur de notre contrôleur, nous allons définir une portée pour un langage dans lequel nous fournirons le nom et la dernière version de ce langage.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
À l’aide de la directive link, nous allons lier notre directive programming-language et la fonction. Nous passerons le modèle avec des valeurs de la portée du langage.
Le code final dans script.js ressemblera à ci-dessous.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
Production:
De cette façon, nous pouvons facilement utiliser des directives intégrées et créer nos nouvelles directives personnalisées qui peuvent être utilisées pour transmettre des valeurs ou des modèles dans des fichiers de modèle.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn