Une explication détaillée de l'utilisation des directives personnalisées dans AngularJS_AngularJS

Les instructions personnalisées d'AngularJS sont vos propres instructions, ainsi que les fonctions de base natives que le compilateur exécute lors de la compilation du DOM. Cela peut être difficile à comprendre. Supposons maintenant que nous souhaitions réutiliser un code spécifique sur différentes pages de notre application sans dupliquer le code. Ensuite, nous pouvons simplement placer ce code dans un fichier séparé et appeler le code à l'aide de la directive personnalisée au lieu de le taper encore et encore. Un tel code est plus facile à comprendre. Il existe quatre types de directives personnalisées dans AngularJS :

1. Commande d'élément
2. Commande d'attribut
3. Directive de classe CSS
4. Commande de commentaire

Avant de les implémenter dans notre application existante, regardons à quoi ressemblent les directives personnalisées :

Commande d'élément

Écrivez la balise suivante en html, qui est utilisée pour placer des extraits de code. Lorsque nous souhaitons utiliser un code spécifique, nous incluons le code en utilisant la balise ci-dessus.

<guitar-reviews> ... </guitar-reviews>

Dans le fichier JS, utilisez les lignes de code suivantes pour rendre efficace la directive personnalisée angulaireJS ci-dessus.

app.directive('guitarReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'custom-directives/reviews.html'
 };
});

Explication du code :

Comme app.controller, nous définissons d'abord app.directive, puis définissons guitarReview, qui est le nom de la balise d'élément utilisé en HTML. Mais avez-vous remarqué que guitar-review et guitarReviews sont différents ? C'est parce que le trait d'union dans guitar-reviews est converti en chameau, il devient donc guitarReviews dans le fichier JS. L'étape suivante est la fonction anonyme qui renvoie les paramètres. restrict : 'E' signifie que nous définissons une directive d'élément personnalisée et templateUrl pointe vers le fichier d'extrait de code à inclure.

Directive d'attribut

Tapez les attributs suivants dans la balise html du fichier html. Cette balise est utilisée pour contenir des extraits de code. Lorsque nous voulons utiliser un morceau de code spécifique, nous tapons simplement une balise comme celle-ci pour inclure le code.

<div guitar-reviews> ... </div>

Dans le fichier JS, utilisez le code suivant pour rendre effective la directive personnalisée angulaireJS ci-dessus.

app.directive('guitarReviews', function() {
 return {
  restrict  : 'A', // used A because of attribute 
  templateUrl : 'custom-directives/reviews.html'
 };
});

Remarque : AngularJS vous recommande d'utiliser du CSS simple et des commentaires ordinaires au lieu du CSS et des commentaires dans les directives personnalisées.

Implémentons maintenant des commandes personnalisées dans l'application. Vous pouvez télécharger les fichiers du projet ici. J'ai mis le code de la partie critiques dans un fichier séparé, puis j'ai attribué l'extrait de code à un élément et je l'ai finalement utilisé dans la page détails.html
.
Premier pas

Créez un nouveau dossier nommé cDirectives sous le dossier spécifié pour stocker les instructions personnalisées. Ensuite, créez un fichier reviews.html dans ce dossier pour contenir les avis de l'utilisateur. À ce stade, votre hiérarchie de dossiers ressemble à ceci :

Étape 2

Coupez la section de révision dans details.html et ajoutez la balise <user-reviews></user-reviews> comme suit :

Étape 3

Copiez le code que vous avez coupé dans la page détails.html dans reviews.html comme indiqué ci-dessous :

<!-- Review Tab START, it has a new controller -->
<div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" >
 
<!-- User Reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews"> 
  <h3>Review Points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdOn | date:'MM/yy'}} </p>
</div><!-- End User Reviews -->
 
<!-- This is showing new review preview-->
<div ng-show="add === 1" class="longDescription uReview" > 
  <h3>Review Points: {{reviewCtrl.review.star}} <span ng-click="add=0">X</span></h3>
  <p> {{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}} </p>
</div>
 
<!-- Add new Review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addReviewLink">Add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addReview function with guitarID -->
<form class="reviewForm" name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(guitarVariable.indexOf(guitarVariable[whichGuitar]))" novalidate ng-show="add===1" >
  <div>
    Review Points: 
    <!-- ng-option here is setting options, cool? -->
    <select ng-model="reviewCtrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    Email: 
    <input type="email" ng-model="reviewCtrl.review.name" required>
    <button type="submit">Submit</button>
    </div>
    <textarea placeholder="Enter your experience with this guitar..." ng-model="reviewCtrl.review.body"></textarea>
</form><!-- END add new review -->
</div><br /><!-- END Review Tab -->

Étape 4

Il est désormais possible d'ajouter des actions dans la balise user-reviews. Ouvrons controller.js et ajoutons le code suivant :

GuitarControllers.directive('userReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'partials/cDirectives/reviews.html'
 };
});

Explication du code :

Notre directive <user-reviews> devient ici userReviews (sous forme de chameau) et le trait d'union a disparu. Ci-dessous, nous pouvons dire que lorsqu'il est appelé, le fichier dans templateURL est chargé et la directive est limitée à l'élément E.

Nous venons de personnaliser une directive. Même s’il semble que rien n’a changé dans notre application, notre code est désormais mieux planifié qu’avant. Pouvez-vous personnaliser les directives pour les descriptions et les spécifications ? Essayez-le vous-même.