Eine ausführliche Erklärung der Verwendung benutzerdefinierter Direktiven in AngularJS_AngularJS

Die benutzerdefinierten Anweisungen von AngularJS sind Ihre eigenen Anweisungen sowie die nativen Kernfunktionen, die der Compiler beim Kompilieren des DOM ausführt. Das kann schwer zu verstehen sein. Nehmen wir nun an, wir möchten einen bestimmten Code auf verschiedenen Seiten unserer Anwendung wiederverwenden, ohne den Code zu duplizieren. Dann können wir diesen Code einfach in eine separate Datei einfügen und den Code mit der benutzerdefinierten Direktive aufrufen, anstatt ihn immer wieder einzugeben. Ein solcher Code ist leichter zu verstehen. In AngularJS gibt es vier Arten von benutzerdefinierten Anweisungen:

1. Elementbefehl
2. Attributbefehl
3. CSS-Klassendirektive
4. Kommentarbefehl

Bevor wir sie in unsere bestehende App implementieren, werfen wir einen Blick darauf, wie benutzerdefinierte Anweisungen aussehen:

Elementbefehl

Schreiben Sie das folgende Tag in HTML, das zum Platzieren von Codeausschnitten verwendet wird. Wenn wir einen bestimmten Code verwenden möchten, fügen wir den Code mithilfe des obigen Tags ein.

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

Verwenden Sie in der JS-Datei die folgenden Codezeilen, um die obige benutzerdefinierte AngularJS-Direktive wirksam zu machen.

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

Code-Erklärung:

Wie app.controller definieren wir zuerst app.directive und dann GuitarReview, den in HTML verwendeten Element-Tag-Namen. Aber ist Ihnen aufgefallen, dass sich „guitar-review“ und „guitarReviews“ unterscheiden? Das liegt daran, dass der Bindestrich in „guitar-reviews“ in „camel case“ umgewandelt wird und in der JS-Datei zu „guitarReviews“ wird. Der nächste Schritt ist die anonyme Funktion, die Parameter zurückgibt. einschränken: „E“ bedeutet, dass wir eine benutzerdefinierte Elementanweisung definieren und templateUrl auf die einzuschließende Code-Snippet-Datei verweist.

Attributanweisung

Geben Sie die folgenden Attribute in das HTML-Tag der HTML-Datei ein. Dieses Tag wird zum Speichern von Codeausschnitten verwendet. Wenn wir einen bestimmten Codeabschnitt verwenden möchten, geben wir einfach ein Tag wie dieses ein, um den Code einzuschließen.

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

Verwenden Sie in der JS-Datei den folgenden Code, um die obige benutzerdefinierte AngularJS-Direktive wirksam zu machen.

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

Hinweis: AngularJS empfiehlt die Verwendung von einfachem CSS und gewöhnlichen Kommentaren anstelle von CSS und Kommentaren in benutzerdefinierten Anweisungen.

Jetzt implementieren wir benutzerdefinierte Befehle in der App. Die Projektdateien können Sie hier herunterladen. Ich habe den Code für den Rezensionsteil in eine separate Datei eingefügt, dann den Codeausschnitt einem Element zugewiesen und ihn schließlich auf der Seite „details.html“ verwendet

Erster Schritt

Erstellen Sie unter dem angegebenen Ordner einen neuen Ordner mit dem Namen cDirectives, um benutzerdefinierte Anweisungen zu speichern. Erstellen Sie dann in diesem Ordner eine Datei „reviews.html“, um die Bewertungen des Benutzers zu speichern. Zu diesem Zeitpunkt sieht Ihre Ordnerhierarchie folgendermaßen aus:

Schritt 2

Schneiden Sie den Rezensionsabschnitt in details.html aus und fügen Sie das Tag hinzu:

Schritt 3

Kopieren Sie den Code, den Sie auf der Seite „details.html“ ausgeschnitten haben, wie unten gezeigt in „reviews.html“:

<!-- 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&#63; -->
    <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 -->

Schritt 4

Es ist jetzt möglich, Aktionen im Tag „Benutzerbewertungen“ hinzuzufügen. Öffnen wir „controller.js“ und fügen den folgenden Code hinzu:

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

Code-Erklärung:

Unsere -Direktive wird hier zu userReviews (in Kamelform) und der Bindestrich ist weg. Nachfolgend können wir sagen, dass beim Aufruf die Datei in templateURL geladen wird und die Direktive auf Element E beschränkt ist.

Wir haben gerade eine Richtlinie angepasst. Auch wenn es so aussieht, als hätte sich an unserer Anwendung nichts geändert, ist unser Code jetzt besser geplant als zuvor. Können Sie Anweisungen für Beschreibungen und Spezifikationen anpassen? Probieren Sie es selbst aus.