AngularJS_AngularJS でのカスタム ディレクティブの使用についての詳細な説明

AngularJS のカスタム命令は、独自の命令に、DOM のコンパイル時にコンパイラが実行するネイティブ コア関数を加えたものです。これを理解するのは難しいかもしれません。ここで、コードを複製せずに、アプリケーション内のさまざまなページで特定のコードを再利用したいとします。その後、このコードを別のファイルに配置し、何度も入力する代わりに、カスタム ディレクティブを使用してコードを呼び出すことができます。このようなコードは理解しやすいです。 AngularJS には 4 種類のカスタム ディレクティブがあります:

1. 要素コマンド
2. 属性コマンド
3. CSS クラス ディレクティブ
4. コメントコマンド

既存のアプリに実装する前に、カスタム ディレクティブがどのようなものかを見てみましょう:

要素コマンド

コード スニペットを配置するために使用される次のタグを HTML に記述します。特定のコードを使用したい場合は、上記のタグを使用してコードをインクルードします。

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

JS ファイルで次のコード行を使用して、上記の angularJS カスタム ディレクティブを有効にします。

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

コードの説明:

app.controller と同様に、最初に app.directive を定義し、次に html で使用される要素タグ名である guitarReview を定義します。しかし、 guitar-review と guitarReviews が違うことに気づきましたか? これは、 guitar-review のハイフンがキャメルケースに変換され、JS ファイルでは guitarReviews になるためです。次のステップは、パラメータを返す匿名関数です。制限: 'E' はカスタム要素ディレクティブを定義していることを意味し、templateUrl は含めるコード スニペット ファイルを指します。

属性ディレクティブ

HTML ファイルの HTML タグに次の属性を入力します。このタグはコード スニペットを保持するために使用されます。特定のコードを使用したい場合は、次のようなタグを入力してコードを含めます。

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

JS ファイルで次のコードを使用して、上記の angularJS カスタム ディレクティブを有効にします。

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

注: AngularJS では、カスタム ディレクティブ内の CSS とコメントの代わりに、単純な CSS と通常のコメントを使用することをお勧めします。

次に、アプリにカスタム コマンドを実装しましょう。プロジェクト ファイルはここからダウンロードできます。レビュー部分のコードを別のファイルに配置し、そのコード スニペットを要素に割り当て、最後にdetails.htmlページで使用しました。

最初のステップ

指定されたフォルダーの下に cDirectives という名前の新しいフォルダーを作成し、カスタマイズされた命令を保存します。次に、ユーザーのレビューを保存するための reviews.html ファイルをこのフォルダーに作成します。この時点で、フォルダー階層は次のようになります:

ステップ 2

details.html のレビュー セクションを切り取り、次のように タグを追加します。

ステップ 3

次に示すように、details.html ページで切り取ったコードを 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 -->

ステップ 4
ユーザーレビュータグにアクションを追加できるようになりました。 controller.js を開いて次のコードを追加しましょう:

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

コードの説明:

ここでの ディレクティブは userReviews (ラクダ形式) になり、ハイフンは削除されます。以下では、呼び出されると templateURL 内のファイルがロードされ、ディレクティブが要素 E に制限されることがわかります。

ディレクティブをカスタマイズしました。アプリケーションでは何も変更されていないように見えますが、コードは以前よりも適切に計画されるようになりました。説明や仕様のディレクティブをカスタマイズできますか?あなたも試してみてください。