問題タブ [angular-ui-modal]

サイトにモーダル ウィンドウを含めるために Angular UI を使用していますが、クリックしてモーダルを開くたびに、HTML が DOM に挿入される前に顕著な遅延が発生します。

遅延の原因を突き止めるためにあらゆることを試しました。テンプレートをキャッシュに入れて、ajax リクエストから読み込まないようにしました。デベロッパー ツール コンソールなどにタイマーを配置したところ、モーダルを開くときに「スタイルの再計算」が原因で約 200 ミリ秒の遅延が発生することが最終的にわかりました。ただし、この時点でのモーダル自体には 3 つの HTML タグと 2 つの単語しか含まれていないため、遅延は発生していません。

次に、モーダルがページ上に完全に配置されているため、ページ全体を再計算して再描画していることに気付きました。ページ自体は非常に長く、繰り返される要素が多数含まれているため、再描画が多くなります。

ここやフィドルで簡単に繰り返すことはできませんが、基本的には多くの HTML を含む非常に長いページであり、モーダル自体は終了 body タグの前に Angular UI によって挿入されます。モーダル自体は position:absolute; です。上:0; 右：0; 下:0; 左：0; 画面いっぱいに。

モーダルとページ コンテンツで translateZ(0) トリックを試しました。また、絶対ではなく position:fixed を試しました。CHromeがページ全体でスタイルの再計算を強制しようとしない限り、モーダルをオーバーレイする方法を見つけることができないようです。

どんなアイデアでも大歓迎です。

あるページで、私は次のようなことをしています:

各InnerCommunicationTopicには、InnerCommunicationMessage のリストがあります。

このボタンは、すべての InnerCommunicationMessage を InnerCommunicationTopic に表示するモーダルを示しています。これを行う方法がわかりません。

ここでモーダルを呼び出します。

モーダルで次のようなことを試しました：

私はそれが間違っていることを知っています.idは単に機能しませんが、私には本当にアイデアがなく、すでにこれについて多くを検索しました. 前もって感謝します！

SOに関するこの質問にはいくつかのバリエーションがあり、すでにWeb上に浮かんでいますが、それらは少し異なり、決定的な答えはありません。

基本的には、モーダルを開いたときのUI Routerの状態を変えたいと思っています。そして、2つのことが起こるようにしたい....

A）ユーザーが戻るボタンを押した場合、モーダルを閉じてURLを前の状態に戻したいのですが、前の状態コントローラーなどをリロードする必要はありません（前の状態のため、オーバーレイとモーダルを削除したいだけです）すでにオーバーレイの下にあり、ユーザーが入力中のフォームがある場合があります)/

B) ユーザーがモーダルを閉じた場合、同じことをしたいのですが、URL は前のものに戻る必要があります (モーダルはどこからでも開かれている可能性があるため、モーダルが戻る状態をハードコーディングすることはできません)モーダルが閉じます。

(A) このコードを使えばほぼ解決できます...

ただし、現在のポップアップの上に別のポップアップを開いた場合でも、モーダルは閉じます (前進しているか後退しているかがわからないため)。基本的には、「ユーザーが戻るボタンを押した、または状態が前の状態に遷移した場合、トップモーダルを閉じる」と言いたいです。

(B) 解き方がわかりません。モーダルが閉じられたときに状態を強制的に以前の状態に戻すことはできますが (以前の状態がわかっている場合)、上記の (A) のコードがトリガーされ、スタックから別のモーダルが削除される可能性があります。また、以前の状態が再び開始されます。基本的に、モーダルが閉じられたときに前の URL に戻りたいだけですが、完全な状態変更は行わずに、それが理にかなっていますか?

私が言うように、そこにはいくつかの半解決策がありますが、上記のシナリオを処理しているように見えるものはありません. 誰かアイデアはありますか？

私は2つのルートを持っています:

どちらも正常に動作します！

私が望むのは、「/list/:class」ルートからモーダル ウィンドウ内のルートの 1 つの「editortemplate」をレンダリングできるようにすることです。

私の「listController」内には、モーダルオープニング機能があります。

テンプレートはうまくレンダリングされますが、テンプレートに必要なクラス変数と id 変数を渡す方法がわかりません (ルートに示されているように)。

テンプレート URL の代わりに変数 (class== var b, id== var a) を使用してルートを定義しようとしましたが、うまくいきませんでした:

AngularJs アプリの作成を開始しました。追加\編集操作を含む多くのダイアログがあります。私の質問は、操作ごとに関数/コントローラー/サービスを構築する必要がありますが、ハンドラーが異なるだけで同じhtmlを使用する必要がありますか? それとも、一般的な方法で（そして多くのifケースで）行うべきですか？最初のオプションの費用はいくらですか?

なぜこのエラーが発生するのか、少し混乱しています。私はそれがtemplateURLにあると思っており、いくつか試してみましたが、役に立ちませんでした。私はドキュメントを読み、たくさんの SO 投稿を精査しましたが、どれもあまり役に立ちませんでした。Express/Node を使用してページを提供したいのですが、それが私の templateURL が app.js で機能しない理由だと感じています。

ここに、コントローラーとテンプレートを含む index.html があります。

これはapp.jsにあるものです

私も templateURL を置き換えようとしましtemplate: "<p> hello world </p>"たが、同じエラーが発生します。

エラートレースは次のとおりです。

通話モーダルを表示

angular-ui-bootstrap によって使用されているコントローラー内にデータをもたらすモーダルを開きます。しかし、選択された「アイテム」の結果が得られていません。

私のコントローラーで：

リストの観点から：

このモーダルが開きますが、次のコンテンツは表示されません:

テンプレートの URL:

ng グリッドの行にあるボタンをクリックすると、モーダル ポップアップが表示されます。モーダル ポップアップでフォームを取得するには、次のように JSON スキーマを入力します。

モーダルポップアップのHTMLは

スキーマは、外部 js ファイルで以下のように定数に入れられます。

そのため、行をクリックng-gridすると、 edit row という関数を実行しています。これにより、ポップアップが開き、定数に従ってフォームに入力されます。

しかし、ここでは、コントローラー関数に定数を挿入する方法について少し混乱しています。その結果、モーダルは空白のフォームで表示されます。

どんな助けにも感謝します!!