1. ホーム
  2. javascript

[解決済み] AngularJSディレクティブとは何ですか?

2022-04-20 05:25:03

質問

AngularJSのドキュメントといくつかのチュートリアルにかなりの時間を費やしましたが、ドキュメントのあまりの無愛想さに驚いています。

AngularJSを導入しようとしている他の人にとっても役に立つかもしれない、簡単で答えやすい質問があります。

AngularJSのディレクティブとは何ですか?

ディレクティブのシンプルで正確な定義がどこかにあるはずですが AngularJSのウェブサイト は、驚くほど役に立たない定義をしています。

トップページで :

ディレクティブは、AngularJSで利用できるユニークで強力な機能です。ディレクティブを使用すると、アプリケーションに特化した新しいHTML構文を考案することができます。

開発者向けドキュメント :

ディレクティブは、HTMLに新しい技を教えるための方法です。DOM コンパイル時に、ディレクティブは HTML とマッチングされ、実行されます。これによって、ディレクティブは動作を登録したり、DOM を変換したりすることができます。

そして、そこには 連続講演 ディレクティブについては、皮肉なことに、聴衆がすでに理解していることを前提にしているようです。

どなたか、わかりやすいように、ディレクティブとは何かを説明した正確な定義を提示していただけませんか。

  1. 何であるか(明確な jQueryの定義 を例として挙げています)
  2. どのような実用的な問題や状況を想定しているか
  3. どのようなデザインパターンを体現しているのか、あるいは、MVCと称されるデザインパターンにどのように適合しているのか。 MVW AngularJSの使命。

解決するには?

<ブロッククオート

それは何か(例としてjQueryの明確な定義を見てください)?

ディレクティブは、基本的に関数です は、AngularコンパイラがDOMでそれを見つけたときに実行されます。 この関数はほとんど何でもできるので、ディレクティブとは何かを定義するのはかなり難しいと思っています。 各ディレクティブには名前(ng-repeat、tabs、make-your-ownなど)があり、各ディレクティブは、要素、属性、クラス、コメントなど、使用できる場所を決定しています。

ディレクティブは通常、(ポスト)リンク機能しか持ちません。 複雑なディレクティブでは、コンパイル関数、リンク前関数、リンク後関数を持つことができます。

<ブロッククオート

実用的な問題や状況を想定しているのでしょうか?

ディレクティブができる最も強力なことは、HTMLを拡張することです。 あなたの拡張は ドメイン固有言語 (DSL) を使ってアプリケーションを構築します。 例えば、アプリケーションがオンラインショッピングサイトを運営している場合、HTML を拡張して "shopping-cart", "coupon", "specials" などのディレクティブを持たせることができます --(@WTK がすでに述べたように)div" や span"s よりむしろ "online shopping® というドメイン内で使うことがより自然な言葉、オブジェクト、概念であれば何でもです。

ディレクティブは、HTMLをコンポーネント化することもできます。つまり、HTMLの束を再利用可能なコンポーネントにまとめることができます。 もし、たくさんのHTMLを取り込むためにng-includeを使っているなら、それはおそらくディレクティブにリファクタリングする時期なのでしょう。

<ブロッククオート

どのようなデザインパターンを体現しているのか、あるいは、どのようにすれば MVC/MVWと称されるangularjsの任務

ディレクティブは、DOMを操作したり、DOMイベントをキャッチしたりする場所です。 そのため、ディレクティブのcompile関数とlink関数は、どちらも"element"を引数として受け取ります。 あなたは

  • ディレクティブを置き換える HTML の束 (すなわちテンプレート) を定義します。
  • この要素 (またはその子要素) にイベントをバインドする
  • クラスの追加・削除
  • text() の値を変更する
  • 同じ要素で定義された属性の変更を監視する (実際には監視されるのは属性の値です -- これらはスコープのプロパティなので、ディレクティブは "model" に変更がないか監視します)
  • などです。


HTMLでは、次のようなものがあります。 <a href="..."> , <img src="..."> , <br> , <table><tr><th> . a、href、img、src、br、table、tr、thはどのように説明するのでしょうか? それは、ディレクティブのことです。