Restreindre les directives personnalisées dans AngularJS

Muhammad Adil 23 mai 2022

Angular Angular Directive

Restreindre les directives personnalisées dans AngularJS

Les directives sont un type spécial de composant AngularJS utilisé pour étendre les fonctionnalités d’un élément HTML ou créer de nouvelles fonctionnalités avec un comportement riche qui n’est pas disponible en HTML pur.

AngularJS inclut des directives pré-construites telles que ngBind, ngModel et ngClass. Le framework Angular utilise ces directives pour indiquer au navigateur les nouvelles balises HTML.

Les balises et commentaires HTML et les classes et propriétés CSS sont des exemples de directives.

La directive de restriction limite l’accès à l’élément DOM à partir de codes HTML externes en lui ajoutant un attribut.

Cet article explique comment limiter les directives personnalisées dans AngularJS.

Directive AngularJS Restreindre `A` contre `E`

L’attribut restrict indique à Angular comment créer une nouvelle directive d’une seule lettre. Il peut avoir quatre valeurs : A, C, E, M, ou une combinaison de ces valeurs, comme EA, ME, etc.

Chacun est important à sa manière.

Les valeurs restreintes et leur signification sont répertoriées ci-dessous.

E indique qu’il ne peut être utilisé que comme élément.
A indique qu’il ne peut être utilisé que comme attribut.
C n’est valide qu’en tant qu’attribut de classe.
M ne s’applique qu’aux commentaires.

Supposons que le nom de la directive soit hello. Voici les types et leur utilisation.

A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->

Lors du développement d’un composant en charge du template, utilisez un élément. Il s’agit d’un scénario courant lorsque vous construisez un langage spécifique à un domaine pour des aspects de votre modèle.

Lorsque vous ajoutez une nouvelle fonctionnalité à un élément existant, utilisez un attribut.

Vous pouvez appliquer plusieurs directives au même nœud DOM lorsque vous utilisez un attribut plutôt qu’un élément.

Ceci est particulièrement utile pour les contrôles de formulaire, où vous pouvez utiliser des propriétés supplémentaires pour mettre en surbrillance, désactiver ou ajouter des étiquettes sans avoir à entourer le composant d’un grand nombre de balises.

Exemple (JavaScript) :

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});
app.directive('helloWorld',function(){
    return {
        replace:true,
        restrict: 'E',
        template: '<h2>Hello World</h2>'
    }
});

Exemple (HTML) :

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <hello-world></hello-world>
        <div hello-world></div>
        <div class="hello-world"></div>
    </body>
</html>

Cliquez ici pour vérifier la démonstration en direct du code.

Auteur: Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Directive AngularJS Restreindre A contre E

Article connexe - Angular Directive

Directive AngularJS Restreindre `A` contre `E`