加载模板失败：uib/template/modal/window.html

Question

我觉得我已经尝试了所有方法，但仍然出现错误：

Failed to load template: uib/template/modal/window.html

在我的索引文件中添加了以下内容：

<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

我在我的应用程序文件中添加了：

    'ui.bootstrap',

我在我的控制器文件中添加了以下内容：

$uibModal

和

this.openPayment = function () {
    var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'payment.html',
        controller: 'paymentController',
        controllerAs: '$ctrl',
        size: 'lg',
    });
}

在我的 paymentController 中，我添加了以下内容：

angular.module('Payment').controller('paymentController', function ($uibModalInstance) {
    var ctrl = this;
});

和payment.html：

    <div class="modal-header">
    <h3 class="modal-title" translate="ACADEMY.EDIT.COURSES.CREATE"></h3>
</div>
<div class="modal-body">
</div>
<div class="lb-modal-footer">
    <a class="btn btn-grey" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}" ng-click="CTRL.cancel()"><i
            class="fa fa-ban"></i></a>
    <button class="btn btn-success m-l-xs {{CTRL.academyCourse.course ? '':'disabled'}}" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | translate }}" ng-click="CTRL.addCourse()"><i
            class="fa fa-check-square-o"></i></button>
</div>

谁能告诉我我做错了什么？

Answer 1

确保您已附上 ui-bootstrap 的模板版本或没有的模板版本。

<!-- remove this -->
<!--<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>--> 
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

在你的情况下，你缺少模态模板 (uib/template/modal/window.html)，所以我会保留 ui-bootstrap-tpls.js。

确保您正确链接到脚本，转到页面源并尝试访问 uib 脚本，您的项目可能有 built但是脚本文件没有添加到 build.
确保添加 uib 脚本 after 添加 angular 脚本和 after 您在 index.html

Answer 2

我通过删除对 ui-bootstrap.js 的引用来解决此程序，仅使用对 ui-bootstrap-tpls.js 的引用，已修复一切。

加载模板失败：uib/template/modal/window.html

Failed to load template: uib/template/modal/window.html

javascript

angularjs

angular-ui-bootstrap