6

アイテムのリストの任意のアイテムで使用するダイアログを作成する必要があります。ダイアログは、明らかにアイテムに依存するフィールドの値を除いて、アイテムに関係なくほとんど同じです。

私が構築しているディレクティブは、ファイルからテンプレートを読み取り、$compile でコンパイルしてから、アイテムのスコープにバインド (リンク) します。バインディングの結果は DOM ツリーです。ダイアログを表示するには、このツリーを既存の DOM の要素に追加する必要があります。私のダイアログの性質上、body タグに直接追加するのが理にかなっています。このダイアログは、リストのさまざまな項目と組み合わせて何度も使用されます

では、私の質問は次のとおりです。このプロセス (コンパイル、バインド、追加) を事前にどの程度行うことができますか? 確かに一度コンパイルを実行できます。コンパイル結果を $rootscope にバインドし、body タグに追加 (非表示) することもできます。このようにして、後で可視性をオンにしてダイアログを表示することができます。

しかし、それがすでにDOMにバインドおよびアタッチされている場合、それを他のスコープに再バインドするのはコーシャですか?そうであれば、それを行う正しい方法は何ですか? 別の質問は、それだけの価値があるかということです。必要になるたびに再挿入するだけですか？

4

3 に答える 3

6

このようなダイアログを一度に1つしか表示せず、頻繁に使用する場合は、別のスコープに再バインドする必要はなく、スコープのデータを変更するだけです。このようなもの：

  1. ダイアログ用のサービスを作成する
  2. ディレクティブを作成し、それにサービスを注入します。リンク関数が実行されたら、$ scope.dialogDataのようなものをサービスに渡して、サービスがデータを更新できるようにします。
  3. サービスを注入するコントローラーを作成します。ダイアログを表示するには、サービスを介してダイアログデータを設定します。ディレクティブスコープにあるコントローラーのデータを変更しているので、Angularはそれに気づき、ダイアログを更新します。
  4. ダイアログラッパーにng-showを追加して、サービスにopen（）/ close（）メソッドを簡単に実装できるようにします。

これで、システムのどこからでも使用できるダイアログができました。DOMやコンパイルをいじることなく、同じディレクティブを再利用するだけです。

于 2013-02-24T08:47:09.937 に答える
6

これは実に素晴らしい質問であり、ますます多くの人々がサービスとしてのダイアログにアプローチし始めていることを嬉しく思います。

あなたの特定の質問に関して、ここに私の考えのいくつかがあります：

  • リンク関数（つまり、$compile呼び出しから返される関数）を「キャッシュ」し、必要に応じてこの関数を呼び出すことができます（スコープ変数を渡します）。
  • (隠された) コンパイルされた要素を挿入する代わりに、ダイアログが開いたときにオンデマンドでのみアタッチできます。これに加えて、定義された場所の上にある DOM 要素に触れないだけでなく、モーダル要素を$rootElementにアタッチします。AngularJS が制御していない DOM の部分には触れないでください。<body>ng-app
  • IMO ダイアログは AngularJS のルートに非常に近く (さまざまな「ビュー」を提供するため)、モーダルが表示される前に (ルートと同様に) Promise を解決できると非常に便利です。

実際、優れた一般的なダイアログ サービスを設計する際には、考慮すべき点が数多くあります。これらのアドバイスと、他のユーザーから提供された優れた情報が参考になることを願っています。しかし、これはすべて少し理論的なものであるため、ここで説明した内容の実装を見ている場合は、この実装を見ることができます。( http://angular-ui.github.com/bootstrap/の $dialog サービス- 完全にカスタマイズ可能であるため、Bootstrap 以外の CSS で使用できます。ドキュメントはこちら)。

このプランクで実際に動作しているのを見ることができます: http://plnkr.co/edit/PG0iHG?p=preview

于 2013-02-24T12:09:37.253 に答える