AngularJS：ngInclude vsディレクティブ

いつディレクティブを使用するのか、ngincludeを使用する方が適切なのはよくわかりません。この例を見てみましょう。私はpassword-and-confirm-input-fields.html、パスワードを入力して確認するためのhtml という部分を持っています。私は、signup-pageとchange-password-pageの両方でこれを使用しています。これらの2つのページにはそれぞれコントローラーがあり、部分的なhtmlには専用コントローラーがありません。

ディレクティブを使用する必要がありますngIncludeか？

それはすべて、コードフラグメントに何を求めているかに依存します。個人的には、コードにロジックがない場合、またはコントローラーさえ必要ない場合は、を使用しngIncludeます。私は通常、ここにビューを乱雑にしたくない、より多くの「静的」htmlフラグメントを配置します。（とにかく、データが親コントローラから取得されている大きなテーブルがあるとします。<div ng-include="bigtable.html" />ビューが雑然としているすべての行よりも）

ロジックやDOM操作がある場合、またはそれが使用されるさまざまなインスタンスでカスタマイズ可能（別名は異なるレンダリング）である必要がある場合は、 directivesがあるは、より良い選択です（最初は手ごわいですが、非常に強力なので、時間をかけてください）。 。

ngInclude

時々、あなたはngInclude's彼らの外部$scope/ によって影響を受けるのを見るでしょうinterface。大規模で複雑なリピーターなどがそうです。このため、これらの2つのインターフェースは結合されています。メインに何かあれば$scope変更さ、インクルードされたパーシャル内のロジックを変更/変更する必要があります。

ディレクティブ

一方、ディレクティブは明示的なスコープ/コントローラー/などを持つことができます。そのため、何かを何度も再利用する必要があるシナリオを考えている場合は、独自のスコープを接続することで、どのように生活がより簡単に、より少なくなるかを理解できます。紛らわしい。

また、DOMとやり取りする場合は常に、ディレクティブを使用する必要があります。これにより、テストが容易になり、これらのアクションがコントローラー/サービスなどから切り離されます。

ヒント： IE8が気になる場合は、restrict： 'E'を使用しないでください。これを回避する方法はいくつかありますが、それらは迷惑です。人生を楽にして、属性などに固執するだけです。<div my-directive />

コンポーネント [Update 3/1/2016]

Angular 1.5で追加されたもので、本質的にはラッパー.directve()です。ほとんどの場合、コンポーネントを使用する必要があります。デフォルトでなどの多くのボイラープレートディレクティブコードを削除しrestrict: 'E', scope : {}, bindToController: trueます。Angular2への移行をより簡単にするために、アプリのほぼすべてにこれらを使用することを強くお勧めします。

結論として：

ほとんどの場合、コンポーネントとディレクティブを作成する必要があります。

• より拡張可能
• テンプレートを作成して、ファイルを外部に持つことができます（ngIncludeなど）
• 親スコープを使用するか、ディレクティブ内の独自の分離スコープを使用するかを選択できます。
• アプリケーション全体での再利用の改善

2016年3月1日更新

Angular 2の処理がゆっくりと終わり、一般的な形式がわかったので（もちろん、多少の変更はありますが）、実行することがいかに重要かを追加したいと思っていますcomponents（制限する必要がある場合はディレクティブ： E 'など）。

コンポーネントはAngular 2 とよく似ています@Component。このようにして、ロジックとhtmlを同じ領域にカプセル化します。

コンポーネントにできる限り多くのものをカプセル化することを確認してください。これにより、Angular 2への移行がはるかに簡単になります。（移行を選択した場合）

以下は、この移行プロセスを説明する素晴らしい記事ですdirectives（もちろんコンポーネントを使用する場合も非常によく似ています）：http : //angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/