Penjelasan mendalam tentang penggunaan arahan tersuai dalam AngularJS_AngularJS

Arahan tersuai AngularJS ialah arahan anda sendiri, ditambah dengan fungsi teras asli yang dijalankan oleh pengkompil semasa menyusun DOM. Ini boleh menjadi sukar untuk difahami. Sekarang, katakan kita mahu menggunakan semula beberapa kod tertentu merentas halaman berbeza dalam aplikasi kita tanpa menduplikasi kod tersebut. Kemudian, kita hanya boleh meletakkan kod ini ke dalam fail berasingan dan memanggil kod menggunakan arahan tersuai dan bukannya menaipnya berulang kali. Kod sedemikian lebih mudah difahami. Terdapat empat jenis arahan tersuai dalam AngularJS:

1. Perintah elemen
2. Arahan atribut
3. Arahan kelas CSS
4. Perintah komen

Sebelum melaksanakannya dalam apl sedia ada kami, mari lihat rupa arahan tersuai:

Arahan Elemen

Tulis teg berikut dalam html, yang digunakan untuk meletakkan coretan kod. Apabila kami ingin menggunakan kod tertentu, kami memasukkan kod menggunakan tag di atas.

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

Dalam fail JS, gunakan baris kod berikut untuk menjadikan arahan tersuai angularJS di atas berkesan.

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

Penjelasan kod:

Seperti app.controller, kami mula-mula mentakrifkan app.directive, dan kemudian mentakrifkan guitarReview, iaitu nama tag elemen yang digunakan dalam html. Tetapi adakah anda perasan bahawa ulasan gitar dan Ulasan gitar adalah berbeza Ini kerana tanda sempang dalam ulasan gitar ditukar kepada bekas unta, jadi ia menjadi Ulasan gitar dalam fail JS. Langkah seterusnya ialah fungsi tanpa nama yang mengembalikan parameter. restrict: 'E' bermakna kami mentakrifkan arahan elemen tersuai dan templateUrl menghala ke fail coretan kod untuk disertakan.

Arahan atribut

Taip atribut berikut dalam teg html fail html. Teg ini digunakan untuk menyimpan coretan kod. Apabila kami ingin menggunakan sekeping kod tertentu, kami hanya menaip teg seperti ini untuk memasukkan kod tersebut.

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

Dalam fail JS, gunakan kod berikut untuk menjadikan arahan tersuai angularJS di atas berkesan.

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

Nota: AngularJS mengesyorkan agar anda menggunakan css ringkas dan komen biasa dan bukannya CSS dan ulasan dalam arahan tersuai.

Sekarang mari laksanakan arahan tersuai dalam apl. Anda boleh memuat turun fail projek di sini. Saya meletakkan kod untuk bahagian ulasan ke dalam fail yang berasingan, kemudian memberikan coretan kod kepada elemen, dan akhirnya menggunakannya dalam halaman details.html

Langkah pertama

Buat folder baharu bernama cDirectives di bawah folder yang ditentukan untuk menyimpan arahan tersuai. Kemudian, buat fail reviews.html dalam folder ini untuk menyimpan ulasan pengguna. Pada ketika ini, hierarki folder anda kelihatan seperti ini:

Langkah 2

Potong bahagian ulasan dalam butiran.html dan tambahkan teg

Langkah 3

Salin kod yang anda potong dalam halaman details.html ke reviews.html seperti yang ditunjukkan di bawah:

<!-- 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 id="Review-Points-review-star">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 id="Review-Points-reviewCtrl-review-star-span-ng-click-add-X-span">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 -->

Langkah 4

Kini anda boleh menambah tindakan dalam teg ulasan pengguna. Mari buka controller.js dan tambah kod berikut:

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

Penerangan kod:

Arahan kami di sini menjadi Ulasan pengguna (dalam bentuk unta) dan tanda sempang hilang. Di bawah ini kita boleh mengatakan bahawa apabila ia dipanggil fail dalam templateURL dimuatkan dan arahan itu terhad kepada elemen E.

Kami baru sahaja menyesuaikan arahan. Walaupun nampaknya tiada apa-apa yang berubah dalam aplikasi kami, kod kami kini lebih terancang berbanding sebelum ini. Bolehkah anda menyesuaikan arahan untuk penerangan dan spesifikasi? Cubalah sendiri.