[解決済み] AngularJSディレクティブとは何ですか?
質問
AngularJSのドキュメントといくつかのチュートリアルにかなりの時間を費やしましたが、ドキュメントのあまりの無愛想さに驚いています。
AngularJSを導入しようとしている他の人にとっても役に立つかもしれない、簡単で答えやすい質問があります。
AngularJSのディレクティブとは何ですか?
ディレクティブのシンプルで正確な定義がどこかにあるはずですが AngularJSのウェブサイト は、驚くほど役に立たない定義をしています。
トップページで :
ディレクティブは、AngularJSで利用できるユニークで強力な機能です。ディレクティブを使用すると、アプリケーションに特化した新しいHTML構文を考案することができます。
で 開発者向けドキュメント :
ディレクティブは、HTMLに新しい技を教えるための方法です。DOM コンパイル時に、ディレクティブは HTML とマッチングされ、実行されます。これによって、ディレクティブは動作を登録したり、DOM を変換したりすることができます。
そして、そこには 連続講演 ディレクティブについては、皮肉なことに、聴衆がすでに理解していることを前提にしているようです。
どなたか、わかりやすいように、ディレクティブとは何かを説明した正確な定義を提示していただけませんか。
- 何であるか(明確な jQueryの定義 を例として挙げています)
- どのような実用的な問題や状況を想定しているか
- どのようなデザインパターンを体現しているのか、あるいは、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はどのように説明するのでしょうか? それは、ディレクティブのことです。
関連
-
要素ツリー制御によるvueTreeテーブル
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueの「データを聴く」原則を解説
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み] サービス、ディレクティブ、モジュールの違いは何ですか?