AngularJS ui.bootstrap.modal templateUrl 无法正常工作

Question

我正在尝试连接一个 ui.bootstrap.modal 对象来显示一些数据，我决定创建一个单独的 html 文件来保存我对模态的所有标记。我可以看到某些模式尝试打开，因为屏幕显示为灰色。但是，在控制台中，我可以看到我收到 404 错误，尽管不在我打算用于我的模板的文件上。

编辑- 我可能已经解决了我的问题。在此模块的配置级别，我添加了 ui.bootstrap.modal。将其更改为 ui.bootstrap 后一切正常。

唯一的问题是我的模态显示在屏幕的左上角？

打开模态的代码：

function openModal() {
 $uibModal.open({
 templateUrl: '../Pages/Views/Templates/emailListingView.html',
 controller: function ($scope) { }
 });
};

我的 HTML 模板：

<div>
<div class="modal-header">
    <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
    <ul>
        <li>Bruh</li>
    </ul>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-warning" type="button">Cancel</button>
</div>

角度错误：

错误：$compile:tpload 加载模板时出错

错误窗口：

加载资源失败：服务器响应状态为404()https://localhost:44375/uib/template/modal/window.html

Answer 1

您需要确保并使用ui-bootstrap-tpls.min.js 文件。这就是支持使用<script> 模板的原因。