由指令生成的可滚动窗格内部的模态在 IE11 中部分隐藏

Question

在开始之前，我完全知道 Internet Explorer 是在浏览器方面吃糊涂的孩子。但是，bootstrap 的模态似乎在我的 web 应用程序中的其他任何地方都可以正常工作。

一点背景故事...我正在使用 Angular 1.5.5 和 Bootstrap 3.x 创建一个中型到大型 web 应用程序，它需要在 IE 和 FF 中都得到支持（很有趣吧？不，它是一个常数斗争）...

我的应用程序的一个组件是面板主体内的一个可滚动 div，它具有一个 ngRepeat，可从对象数组生成自定义指令。这些指令中的每一个都会获取不同的数据来显示，其中一个是它“包含”的项目数组。

在这些指令中的每一个上都有一个删除按钮，允许用户从指令中删除选定的项目，以及一个删除按钮，允许用户完全删除指令以及与该指令的所有项目关联。为了应用此功能，我尝试使用模式来确认删除和删除。删除时出现的模态也是显示要删除的项目，因此我需要能够提供需要删除的项目数组和指令“名称”（即 id）。

存在的问题（并且仅在 IE 中）是因为指令在可滚动的 div 中，由指令生成的模态也被认为在可滚动的 div 和模态的部分（标题和身体的一部分）位于可滚动 div 之外，被切断。这只发生在 IE 中，就像我之前所说的，整个项目中还有很多其他模式可以与 IE 一起使用，但没有一个位于可滚动的 div 中。

我想到的解决方案如下。

• 使用 angular-ui-bootstrap：该项目需要一些时间来加载，因为它已经很庞大了，我想尽量避免添加另一个沉重的部分
• 在指令之外声明模式：现在这是一个有趣的想法，但是，问题是指令 A 需要调用从父控制器提供给它的方法属性打开模式。然后父控制器需要等到用户单击模态框上的 OK 按钮，然后它需要将结果返回给指令，但此时

A：父控制器不知道哪个指令调用了打开模式（我可以在父控制器中设置一个变量来说明哪个指令进行了调用但是......）

B：即使父控制器知道哪个指令进行了调用，它仍然需要调用一个存在于进行调用的指令中的函数，并且由于角度范围的性质，父控制器不知道子指令中的函数。

我知道这有点啰嗦，读起来可能真的很无聊，但我不确定是否有任何其他方法可以浓缩它并仍然表达我的意思。

Answer 1

我通过将 Modal 置于指令之外来解决此问题。这些指令现在调用一个属于父控制器的方法，让父控制器知道它需要显示模态并将数据发送给它以在其中显示，以及在 promise 返回时调用的函数引用。然后，我创建了一个承诺，该承诺在用户输入模态时得到解决。如果 Promise 以积极的方式返回，则父控制器通过对服务器进行 http 调用来生成另一个 Promise，并且该 Promise 将返回给进行调用的原始指令。

这一切都因为承诺而成为可能。如果我没有使用承诺，父控制器将不知道在用户从模态输入时哪个指令进行了调用。

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);
        }
    }
}