Utilisez AngularJS pour étendre les fonctionnalités HTML dans les directives personnalisées. Définition fonctionnelle des "instructions" utilisées par les directives personnalisées. La directive personnalisée remplace simplement l'élément qu'il est activé. Pendant le processus de démarrage, l'application AngularJS trouve l'élément correspondant, et fait un bon travail d'utilisation de la méthode Instruction Instruction Compile () pour une activité, puis de gérer les éléments en utilisant la méthode d'instruction personnalisée () basée sur la plage d'instructions. AngularJS fournit un support pour créer des directives personnalisées avec les éléments suivants du type.
Directives des éléments - Activez un élément correspondant lorsque la directive rencontre.
Attribut - - Activez un attribut correspondant lorsque la directive rencontre.
CSS - - Activez les styles CSS correspondants lorsque l'instruction rencontre.
Commentaire - - Activer les commentaires correspondants lorsque la directive rencontre.
Comprendre les commandes personnalisées
Définissez les balises HTML personnalisées.
<Student Name = "Mahesh"> </tudent> <br/>
<Student name = "Piyush"> </tudent>
Définissez les directives personnalisées pour gérer les balises HTML personnalisées ci-dessus.
var mainApp = angular.module ("mainApp", []); // Créer une directive, le premier paramètre est l'élément HTML à attacher. // Nous attachons la balise HTML étudiante. // Cette directive sera activée dès que tout élément étudiant sera rencontré dans htmlmainapp.directive ('étudiant', function () {// définir la directive directive directive directive = {}; // restrect = e, signifie que l'élément complet est son texte. <b> {{Student.name}} </b>, Roll No: <b> {{Student.rollno}} </b> "; // La portée est utilisée pour distinguer chaque élément étudiant en fonction des critères. Directive.Scope = {Student:" = Name "} // Compile est appelé instance application. fonction (élément, attributs) {element.css ("border", "1px solide #ccccc"); <b> "+ $ scope.student.rollno +" </b> <br/> "); element.css (" background-color "," # ff00ff ");} return linkFunction;} return directive;});Définissez le contrôleur pour mettre à jour la portée comme instruction. Ici, nous utilisons la valeur d'attribut de nom comme portée de l'enfant.
mainApp.Controller ('StudentController', fonction ($ Scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "Mahesh Parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush.name = "Piyush parashar"; $ scope.piyush.rollno = 2;});exemple
<Html> <A-Head> <Title> Angular JS Custom Directives </ Title> </ Head> <Body> <H2> AngularJS Exemple d'application </h2> <div ng-app = "MainApp" Ng-Controller = "StudentController"> <Student Name = "Mahesh"> </ Student> <br/> <Student Name = "Piyush"> </ Student> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </ script> <script> var mainApp = angular.module ("mainApp", []); mainApp.Directive ('Student', function () {var directive = {}; directive.restrict = 'e'; directive.template = "Student: <b> {{student.name}} </b>, Roll No: <b> {{Student.rollNo}} </b>"; Directive.Scope = {Student: "= Name". Attributs) {element.css ("Border", "1Px Solid #cccccccc"); element.css ("Background-Color", "# ff00ff"); mainApp.Controller ('StudentController', fonction ($ Scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "Mahesh Parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush.name = "Piyush parashar"; $ scope.piyush.rollno = 2;}); </cript> </ body> </html>résultat
Ouvrez Textangularjs.html dans un navigateur Web. Les résultats sont les suivants:
Ce qui précède est la compilation des informations de commande personnalisées d'AngularJS, et nous continuerons à l'ajouter plus tard. Merci pour votre soutien à ce site!