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

【问题标题】：Failed to load template: uib/template/modal/window.html加载模板失败：uib/template/modal/window.html
【发布时间】：2017-04-26 01:18:46
【问题描述】：

我觉得我已经尝试了一切，但我仍然收到错误：

加载模板失败：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>

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

【问题讨论】：

你能做一个 plunkr 吗？
您的 payment.html 是否在文件夹结构中？你必须把它的路径。查看您的浏览器，看看它试图从哪里加载它，看看它是否在哪里。还要查看模板缓存，稍后再做对。哟将不得不使用 Gulp 或 Angular 模板缓存。你能显示你的应用程序的结构，你的文件夹结构。我明白了，只是在您认为的位置找不到它，通常它看起来像 app/My folder/my controller/template.html
@Maccurt 网址是正确的，我尝试了不同的路径，每次都收到此错误！
所以如果你把 templateUrl:uib/template/modal/window.html 放上去就不行了？

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

我解决了这个程序购买删除对 ui-bootstrap.js 的引用，仅使用对 ui-bootstrap-tpls.js 的引用，修复了所有问题。

【讨论】：

【解决方案2】：

确保您附加了模板版本的 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 脚本，您可能已经构建了项目，但脚本文件未添加到构建中。
确保在添加 angular 脚本并在 index.html 中添加引导文件之后添加 uib 脚本

【讨论】：

谢谢。我刚刚对项目进行了大规模清理，并用最新版本替换了所有库，这发生在我身上。原来我也加载了这两个库。（掌心）。删除对 ui-bootstrap.js 的引用修复了所有问题。