6

問題: Angular JS コントローラーで多数のモーダルを管理するにはどうすればよいですか?

私はそれらをビューの一番下に置いてhttp://angular-ui.github.io/bootstrap/#/modalを使用して いましたが、最終的には大きな html テンプレート (それが機能します) になりましたが、効率が悪いと感じました。

私が試したこと：

  • UI-Bootstrap の $dialog (お尻の痛み)
  • UI-Bootstrap のモーダルを使用して ng-include を介して含まれるテンプレートに保存されたモーダル
  • コントローラー内のビューの下部に配置されたモーダル << 現在オンで動作しています

これは何かが欠けているように感じます。ポインタはありますか？

編集：

私はたくさんの検索を行い、スクリプトを見つけて少しアップグレードしました：

  • モーダルは外部テンプレートです
  • ボタンをクリックした範囲内にもあります
  • 3 種類 (確認、メッセージ、テンプレートの読み込み)

https://github.com/clouddueling/angularjs-modals

アップデート

それ以来、この問題をカバーするリポジトリを作成しました: http://clouddueling.github.io/angular-common/

4

1 に答える 1

8

rGilが述べたように、複雑すぎると思われる場合は、UI-Bootstrapではなく独自のディレクティブを使用してください。すべてのモーダルは多かれ少なかれ似ています。モーダルを設定するには、テンプレートと 2 ～ 3 個のスコープ変数が必要です。次に、パラメーターを渡してモーダルを開閉し、さらに機能を提供することもできます。含めるディレクティブが増えるほど、ディレクティブが大きくなります。

2 番目のオプションは、これらのモーダルで個別の HTML パーシャルを作成し、ngInclude を使用してそれらをビューに配置することです。モーダルが異なっていても、複数のページで頻繁に再利用される場合、これは大幅な時間の節約になります。これの欠点は、開閉を切り替える必要があることです。Angular の方法は、トグルだけを処理するディレクティブを作成することです。簡単な方法は、小さな jQuery を作成し、クリックなどでモーダルを開くことです。

正直なところ、結局はあなたの快適さのレベルです。jQuery はコードを破壊しますか? いいえ、しかしそれは「Angular Way」ではありません。jQuery を使用すると、モーダル トグルを 3 ～ 4 行のコードで記述できます。Angular Way でそれを行うには、ディレクティブと 10 行以上のコードが必要です。しかし、Angular の方法には、将来的にタグを作成できるという利点があり、それ以上のコードは必要ありません。モーダルが 1 つしかない場合は、jQuery で行うことができます。あなたの場合のように、複数のモーダルがある場合、時間をかけてディレクティブを学習し、希望どおりに機能するものを考え出すことができます。

于 2013-05-24T07:35:54.293 に答える