[解決済み] AngularJS: ngIncludeとディレクティブの比較

質問

どのような場合にディレクティブを使い、どのような場合に nginclude を使うのが適切なのかがよくわかりません。この例を見てください。パーシャルがあります。 password-and-confirm-input-fields.html これは、パスワードの入力と確認のためのhtmlです。これは、サインアップページとパスワード変更ページの両方で使用しています。この2つのページにはそれぞれコントローラがあり、パーシャルhtmlには専用のコントローラはありません。

ディレクティブを使うべきか ngInclude を使うべきでしょうか？

どのように解決するのですか？

それはすべて、あなたがコードフラグメントから何を得たいかによります。個人的には、コードにロジックがない場合、あるいはコントローラを必要としない場合、私は ngInclude . 私は通常、ビューを散らかしたくない大きなquot;static" html フラグメントをここに置きます。(例: 例えば、データが親コントローラから来るような大きなテーブルの場合。その場合は <div ng-include="bigtable.html" /> の方がすっきりします)。

ロジックやDOM操作がある場合、あるいは使用するインスタンスによってカスタマイズ可能（異なるレンダリング）であることが必要な場合、そのような場合は directives の方が良い選択です（最初はとっつきにくいですが、非常に強力なので、時間をかけてください）。

ngInclude

時々、あなたは ngInclude's が表示されることがありますが、これは外装に影響された $scope / interface . 例えば、大きな/複雑なリピータなどです。 この2つのインタフェースは、このように結びついています。もし、メインの $scope が変更された場合、含まれるパーシャルの中でロジックを変更しなければなりません。

ディレクティブ

一方、ディレクティブは は は明示的にスコープやコントローラなどを持つことができます。ですから、もしあなたが何かを何度も再利用しなければならないシナリオを考えているならば、独自のスコープを持つことで生活がより簡単になり、混乱が少なくなることがお分かりいただけると思います。

また、DOM を操作するときはいつでも、ディレクティブを使用する必要があります。これはテストに適しており、これらのアクションをコントローラ/サービス/その他から切り離すことができます。

ヒント 必ず ではなく を使用する必要があります。これを回避する方法はありますが、迷惑な話です。ただ、生活を楽にするために、属性/などにこだわってください。 <div my-directive />

コンポーネント [2016/3/1更新】です。］

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

結論から言うと

あなたが作成すべきなのは コンポーネント & ディレクティブ を作成する必要があります。

• より拡張可能
• テンプレート化し、ファイルを外部で持つことができる（ngIncludeのように）
• 親スコープを選択するか、それ自身の を分離する スコープを使用することができます。
• アプリケーション全体を通してより良い再利用

2016年3月1日更新

Angular 2が徐々に完成し、一般的な形式がわかってきたので（もちろん、まだあちこちで変更があるでしょう）、次のことを行うことがいかに重要であるかを付け加えたいと思いました。 components (を使用することがいかに重要かを付け加えておきたいと思います（制限する必要がある場合はディレクティブを使用することもあります。）

コンポーネントは非常に 似ている であり、Angular 2 の @Component . このように、ロジックとHTMLを同じ領域にカプセル化しているのです。

できる限り多くのものをコンポーネントでカプセル化するようにしてください。(移行することを選択した場合)

を使用したこの移行プロセスを説明した素晴らしい記事があります。 directives (を使用した移行方法を説明した素晴らしい記事があります（もちろんコンポーネントを使用する場合も同様です）。 http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/