向 Angular UI 引导模式窗口模板添加关闭按钮答案

【问题标题】：Add close button to Angular UI bootstrap modal window template向 Angular UI 引导模式窗口模板添加关闭按钮
【发布时间】：2017-08-03 23:50:09
【问题描述】：

我正在按照此链接关注示例代码：

http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal

这里的 plunker 示例：

http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview

我尝试使用windowTemplateUrl 定义自定义模板customModal.html 以向模态框添加关闭按钮（右上角），但模态对话框无法正确显示，我只看到深色背景和模态框有点暗淡。此外，按钮没有响应。

如果有人可以帮我定义这样的自定义模板，以允许对所有类似的模式对话框使用关闭按钮，不胜感激。

更新：我想解释一下为什么这不可能与this question as suggested 重复。另一个问题是处理“为什么我们在只指定模板时打开对话框时会出错”。在这个问题中，即使我按照说明实施模板，模板也没有显示正确。

塔雷克

【问题讨论】：

Angular UI Bootstrap modal - use custom modal window的可能重复
检查this plunker。这是你要找的吗？
非常感谢.. 看起来好多了，但是关闭按钮不起作用！您还可以解释一下您是如何弄清楚如何修复模板的吗？文档中没有提到！
为什么不把 x 关闭按钮放在页眉中？
@JesusCarrasco 这就是我最终要做的。我之所以要将它添加到自定义模板中，是为了实现模板可以节省精力和时间，如果我想更改设计，那么我只会更改模板。这就是模板的用途。

标签： angularjs modal-dialog angular-ui-bootstrap

【解决方案1】：

在你的脚本模板中添加

<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
 </button>
 <h4>Title</h4>
 </div>

【讨论】：

这是我现在使用的解决方案，但我需要了解为什么模板解决方案不起作用？
可能是 ui-bootstrap 库的一个错误，问题在于 windowTemplate 中的函数关闭，它不会触发。