IE11で部分的に隠されているディレクティブによってスクロール可能なペインの内部がモーフィングされています

Question

私が始め始める前に、インターネットエクスプローラはウェブブラウザに関してはコーナーで食べている子供です。しかし、ブートストラップのモーダルは、Webアプリケーション全体を通してどこでもうまく動作しているようです。

小さなバックストーリー...私はAngular 1.5.5とBootstrap 3.xの中から大規模なwebappを作成しています。IEとFFの両方でサポートする必要があります（本当にうれしいです定数の闘争）...

私のアプリのコンポーネントの1つは、オブジェクトの配列からカスタムディレクティブを生成するngRepeatを持つパネル本体の内部にスクロール可能なdivです。これらのディレクティブのそれぞれは、表示するための異なるデータを取得します。そのうちの1つは、それが含まれているアイテムの配列です。

これらの各ディレクティブには、ユーザーがディレクティブから選択した項目を削除できる削除ボタンと、そのディレクティブとの完全な削除を可能にする削除ボタンがあります。この機能を適用するには、削除と削除の確認にモーダルを使用しようとしています。削除時に表示されるモーダルは、削除するアイテムも表示するため、削除する必要があるアイテムの配列と、「名前」（つまりID）というディレクティブの両方を指定できる必要があります。

ディレクティブがスクロール可能なdiv内にあるため、ディレクティブによって生成されるモーダルもスクロール可能なdiv内にあるとみなされ、モーダルの部分（ヘッダーと本体の一部）がスクロール可能なdivの外側にある場合は切り捨てられます。これはIEでのみ発生し、前に述べたように、プロジェクト全体ではIEで動作する他のモーダルもたくさんあります。スクロール可能なdiv内には存在しません。

私が心に抱いていた解決策は次のとおりです。

• 使用角度-UI-ブートストラップ：それはとても巨大であり、私はそれに
• を別の重い部分をお持ち加えることを避けるために試してみたいと思いますので、それはすでに、プロジェクトのロードに時間がかかりますの外側で宣言されたモーダル：これは興味深い考えですが、ディレクティブAは、親コントローラからモーダルを開くために親のコントローラから提供されたメソッドを呼び出す必要があります。そして、親コントローラは、ユーザがモーダルでOKボタンをクリックするまで待つ必要があるだろうし、それは、ディレクティブに結果を返す必要があるだろうが、この時点で

：親コントローラを持っていますどのディレクティブがモーダルを開くように呼び出されたかについての知識はありません（どのディレクティブが呼び出しを行ったかを示す親にvarを設定できますが...）。

B：親コントローラが、呼び出しを行ったディレクティブ内に存在する関数を呼び出す必要があり、角度の範囲の性質上、親コントローラha子供の指示の中にある機能についての知識はない。

これはちょっと風が強くて、読んでいるのが本当に退屈だと知っていますが、それを凝縮させて、それでも私の意見を理解する方法はわかりませんでした。

Answer 1

この問題は、Modalをディレクティブの外側に置くことで解決しました。ディレクティブは、親コントローラに属するメソッドを呼び出して、親コントローラにモーダルを表示し、その中に表示するデータを送信する必要があることを知り、関数の参照によってプロミスリターンを呼び出します。次に、モーダル内のユーザー入力に基づいて解決される約束を作成します。約束が正の方法で返ってくると、親コントローラはサーバーへのhttp呼び出しを行うことによって別の約束を生成し、その約束はその呼び出しを行った元の指令に返されます。

これはすべて約束のために可能になりました。私が約束を使用しなかった場合、親コントローラは、モーダルからのユーザ入力時にどのディレクティブが呼び出しを行ったかを知ることができませんでした。

function openModal(modalRequestData){ 
    var promise = generateModalPromise(modalRequestData); 
    promise.then(function(response){ 
     //do some stuff 
     if(response){ 
      var httpPromise = //make http call 
      httpPromise.then(function(out){ 
       //do some stuff regarding result of http call 
      } 
      modalRequestData.functionToCall(httpPromise); 
     } 
    } 
}