web-dev-qa-db-ja.com

AngularJS:ngInclude vsディレクティブ

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

これにディレクティブまたはngIncludeを使用する必要がありますか?

93
EricC

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

ロジック、DOM操作がある場合、または使用するインスタンスごとにカスタマイズ可能(異なるレンダリング)が必要な場合は、directivesの方が適しています(最初は気が遠くなりますが、強力な、それを時間を与えます)。

ngInclude

外部の_ngInclude's_/interfaceの影響を受ける_$scope_が表示される場合があります。大型/複雑なリピーターなどは言うことができます。このため、これら2つのインターフェイスは互いに結びついています。メインの_$scope_の何かが変更された場合、含まれているパーシャル内のロジックを変更/変更する必要があります。

ディレクティブ

一方、ディレクティブcanには明示的なスコープ/コントローラー/などがあります。したがって、何かを複数回再利用する必要があるシナリオを考えている場合、独自のスコープを持つ方法を確認できます。接続すると、生活が楽になり、混乱が少なくなります。

また、DOMとのやり取りを行うときはいつでも、ディレクティブを使用する必要があります。これにより、テストが改善され、これらのアクションがコントローラー/サービス/などから切り離されます。

ヒント:使用するためにnotを確認してください制限:IE8が気になる場合は「E」!これを回避する方法はありますが、それらは迷惑です。人生を楽にし、属性などに固執するだけです。 _<div my-directive />_

コンポーネント[2016年3月1日更新]

Angular 1.5、それは本質的に.directve()のラッパーです。コンポーネントはほとんどの時間に使用する必要があります。多くの定型的なディレクティブコードを削除します。 _restrict: 'E', scope : {}, bindToController: true_。Angular2に簡単に移行できるようにするために、アプリのほとんどすべてにこれらを使用することを強くお勧めします。

結論:

Components&Directivesの大半を作成する必要があります。

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


2016年3月1日更新

これでAngular 2はゆっくりとまとめられており、一般的な形式(もちろん、あちこちでいくつかの変更が引き続き行われます)は、components(制限する必要がある場合はディレクティブ:たとえば 'E')。

コンポーネントは非常にsimilar to Angular 2's_@Component_。このようにロジックとHTMLを同じ領域にカプセル化しています。


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

directivesを使用したこの移行プロセスを説明する素晴らしい記事があります(もちろんコンポーネントを使用する場合は非常に似ています): http://angular-tips.com/blog/2015/09/migrating -directives-to-angular-2 /