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

Schritt 2

Schritt 3

<!-- 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

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

Code-Erklärung: