1

あなたの見解/経験を共有していただければ幸いです。

一部のデータ (サーバーからフェッチされた) を共有するいくつかのウィジェットを含むビューがあるとします。たとえば、同じビューにツリー、リスト、パンくずリストのウィジェットがあるとします。当然のことながら、1 つのアイテムの名前を同時に複数のウィジェットに表示できます。私の質問は、そのようなビューを開発するためのベストプラクティスは何ですか? 具体的には：

  1. ウィジェットは完全に独立していますか? (実装が最も簡単ですが、パフォーマンスの問題に悩まされます)
  2. ウィジェットが依存している場合、次を介して通信しますか?
    1. 単一のモデル (ウィジェット間の密結合を導入し、さらなるコードの進化を防ぎます)
    2. イベント (結合は失われますが、コントラクトが失われるためエラーが発生しやすく、コードが明示的ではありません)
    3. その他の方法で
  3. これらのウィジェットに独自のコントローラーとスコープがある場合、URL (またはその他のイベント) からの変更通知をそれらすべてにどのように伝達しますか? たとえば、URL ルーティングを使用して特定の ID を持つエンティティを表示したい場合、この変更をキャッチし、社内メカニズムを使用してすべてのウィジェットに通知する役割を担う最上位のビュー コントローラーがありますか、またはウィジェットを実行します独立してイベントをキャッチしますか？

これらの質問はすべて何らかの形で関連していると思いますので、好きな形式/順序で自由に答えてください.

ありがとう。

4

1 に答える 1

3

ウィジェットは完全に独立していますか?

これは、ウィジェット/ディレクティブが何をしているかに大きく依存するため、回答するには広すぎる質問だと思います。分離スコープを使用する必要があるかどうかを尋ねていますか? AngularJS でディレクティブを作成する場合、新しいスコープ、新しい子スコープ、または新しい分離スコープが必要ないかどうかを判断するにはどうすればよいですか?も参照してください。

彼らは...を介して通信しますか？

繰り返しますが、広すぎて申し訳ありません...ディレクティブが何をするかによって異なります。すでにリストした方法に加えて、経由で通信することもできます

  • 通信に必要なディレクティブが 3 つ以上ある場合に使用するサービス
  • require: 'controllerNameHere'. このrequireアプローチでは、this代わりに を使用してコントローラーでメソッドを定義します$scope。ただし、この方法は本質的に一方向の通信に制限されていrequireます。つまり、必要なディレクティブから必要なディレクティブまでです。たとえば、AngularJS のホームページでは、paneディレクティブrequireはtabsディレクティブです。これにより、paneディレクティブはtabsディレクティブのコントローラーでメソッドを呼び出すことができますが、tabsディレクティブはディレクティブのコントローラーでメソッドを呼び出すことはできませんpane。(詳細については、「this」と AngularJS コントローラーの $scope を参照してください)

変更通知をどのように伝達しますか

それは、ディレクティブが持つスコープのタイプによって異なります。ディレクティブに使用scope: trueしている場合は、何も伝播する必要はありません。それらはすべて$watch、親スコープのプロパティを持つことができます (また、JavaScript プロトタイプの継承の仕組みにより、すべてのディレクティブが親スコープのプロパティを見ることができます)。を使用している場合はscope: {...}、「=」または「@」を使用してローカル ディレクティブ スコープ変数を定義し、$watchそれらを監視するために使用できます。

$watches のパフォーマンスが気になる場合 (ダイジェスト サイクルごとに少なくとも 1 回評価されるため)、イベントの方が適している可能性があります。

考慮すべきもう 1 つの点: ディレクティブに URL を認識させたいのか、それともスコープ プロパティだけを認識させたいのか? スコープ プロパティを使用すると、ディレクティブがより再利用しやすくなる可能性があります。

于 2013-03-18T14:36:09.590 に答える