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

时间:2016-11-22 13:15:57

标签: angularjs internet-explorer bootstrap-modal

在我开始之前,我完全清楚,当涉及到网络浏览器时,互联网资源管理器就是角落里的孩子。但是,bootstrap的模态似乎在我的webapp中的其他地方工作正常。

一个小小的背景故事...我正在使用Angular 1.5.5和Bootstrap 3.x创建一个中型到大型的webapp,它需要在IE和FF中得到支持(非常有趣吗?不是真的,它是一个常数奋斗... ...

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

在每个指令上都有一个删除按钮,允许用户从指令中删除所选项目,还有一个删除按钮,允许用户完全删除该指令以及与该指令的所有项目关联。要应用此功能,我尝试使用模式来确认删除和删除。删除时显示的模式是显示要删除的项目,因此我需要能够提供需要删除的项目数组和指令" name"(即id )。

存在(并且仅在IE中)的问题是因为指令在可滚动的div内,指令生成的模态也被认为是在可滚动的div和模态的部分内(标题)并且位于可滚动div之外的身体的一部分被切断。这只发生在IE中,就像我之前所说的那样,整个项目中有很多其他模态可以与IE一起使用,只有一个模拟器位于可滚动的div中。

我脑子里想到的解决方案如下。

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

A :父控制器不知道哪个指令调用打开模态(我可以在父节点中设置var,说明哪个指令调用了调用但是......)< / p>

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

我知道这有点长篇大论,读起来可能真的很无聊,但我不确定是否有任何其他方法来浓缩它,仍然能够明白我的观点。

1 个答案:

答案 0 :(得分:0)

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

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

interactive rebase