无法加载模板:uib / template / modal / window.html

时间:2016-12-10 19:31:58

标签: javascript angularjs angular-ui-bootstrap

我觉得我已经尝试了一切,但我仍然得到错误:

  

无法加载模板: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>

在我的app文件中添加了:

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

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

2 个答案:

答案 0 :(得分:24)

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

    $current_url = ((isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on") ? "https" : "http").'://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
    
  2. 在您的情况下,您错过了模态模板(<!-- 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

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

    2. 确保添加uib脚本 添加角度脚本后 >在index.html中添加引导程序文件

答案 1 :(得分:2)

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