[解決済み] 最もエレガントな方法でポップアップを表示する
2022-04-21 06:50:46
質問
私はこのAngularJSのアプリを持っています。すべてうまく動作しています。
今、私は特定の条件が真になったときに異なるポップアップを表示する必要があり、それを進めるための最良の方法は何だろうと考えていました。
現在、2つの選択肢を評価していますが、他の選択肢も絶対に受け入れるつもりです。
オプション1
ポップアップ用の新しいHTML要素を作成し、コントローラから直接DOMに追加することができます。
これでは、MVCデザインパターンが崩れてしまいます。私はこの解決策に満足していません。
オプション2
すべてのポップアップのコードを静的なHTMLファイルに挿入することはいつでもできます。そして
ngShow
正しいポップアップだけを表示/非表示にすることができます。
このオプションは、拡張性がありません。
だから、私が望むことを実現するためには、もっと良い方法があるはずなんです。
どのように解決するのですか?
AngularJS モーダルに関するこれまでの経験から、最もエレガントなアプローチは、モーダルに表示する部分的な (HTML) テンプレートを提供できる専用のサービスだと考えています。
モーダルは、AngularJSのルーティングのようなものですが、モーダルポップアップで表示されるだけなのです。
AngularUIのブートストラッププロジェクト(
http://angular-ui.github.com/bootstrap/
) には、優れた
$modal
サービス (バージョン 0.6.0 以前は $dialog と呼ばれていました) を実装しており、パーシャルのコンテンツをモーダルポップアップとして表示するためのサービスです。
関連
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] クラスを条件付きで適用する場合の最適な方法は何ですか?
-
[解決済み] AngularJS 。非同期データでサービスを初期化する
-
[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには?
-
[解決済み】Twitter Bootstrapを使用して要素を隠し、jQueryを使用してそれを表示するには?
-
[解決済み] AngularJS: ng-show / ng-hide が `{{ }}` 内挿で動作しない。
-
[解決済み] AngularJSディレクティブとは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vue+ElementUIによる大規模なフォームの処理例
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない