无法加载模板:uib/template/modal/window.html [英] Failed to load template: uib/template/modal/window.html

问题描述

我觉得我已经尝试了一切，但仍然出现错误:

<块引用>

无法加载模板: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: '模态标题',ariaDescribedBy: 'modal-body',templateUrl: 'payment.html',控制器:'支付控制器'，controllerAs: '$ctrl',尺寸:'lg'，});}

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

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

和payment.html:

 
<h3 class="modal-title" translate="ACADEMY.EDIT.COURSES.CREATE"></h3>
<div class="modal-body">

<div class="lb-modal-footer"><a class="btn btn-grey" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}" ng-click="CTRL.cancel()"><iclass="fa fa-ban"></i></a><button class="btn btn-success ml-xs {{CTRL.academyCourse.course ?'':'disabled'}}" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | 翻译 }}" ng-click="CTRL.addCourse()"><iclass="fa fa-check-square-o"></i></button>

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

解决方案

1. 确保您已经附加了 ui-bootstrap 的模板版本，或者没有附加.

   <!--<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代码>.

2. 确保您正确链接到脚本，转到页面源并尝试访问 uib 脚本，可能您已经构建了项目，但脚本文件未添加到构建中.

3. 确保在之后添加角度脚本和之后在 index.html 中添加引导文件

I feel like i have attempted everything and i still get the error:

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

in my index file i have added the following:

<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>

in my app file ive added:

    'ui.bootstrap', 

And in my controller file ive added the following:

$uibModal

and

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

in my paymentController i have added the following:

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

And 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>

So can anyone tell me what ive done wrong?

解决方案

1. Make sure you have either attached the template version of ui-bootstrap or the one without.

   <!-- 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>
   

In your case, you're missing the modal template (uib/template/modal/window.html), so I would keep the ui-bootstrap-tpls.js.

2. Make sure you are properly linking to the script, go to the page source and try reaching the uib script, It's possible you have built your project but the script file wasn't added into the build.

3. make sure you are adding the uib script after you add the angular script and after you add the bootstrap files in your index.html

这篇关于无法加载模板:uib/template/modal/window.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！