Angular - 模态未打开但出现错误答案

【问题标题】：Angular - Modal does not open but gives an errorAngular - 模态未打开但出现错误
【发布时间】：2017-04-15 01:12:14
【问题描述】：

我有一个带有一些 PHP 功能和 HTML 代码的 PHP 页面。 Angular 应用程序已引导并且工作正常。

但是我添加了一个要打开的模式，但它在控制台中给了我以下错误。

http://errors.angularjs.org/1.4.8/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found

错误表示模板不存在时出现，但它存在。

请帮我解决这个问题！

我的主 php 文件（正文标签）

<body>
    <div ng-app="myApp" ng-controller="mainController as vm" ng-cloak>
        <span ng-click="vm.openPackage(1)">TEST-OPEN</span>

        <script type="text/ng-template" id="package.html">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">{{ vm.package.title}}</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <p>{{ vm.package.description}}</p>
            </div>
        </script>
    </div>
</body>

我的 JS 文件

var app = angular.module('myApp', [
    "ui.bootstrap"
]);

app.controller('mainController', ["$scope", "$http", "$uibModal", function ($scope, $http, $uibModal) {
    var vm = this;

    vm.openPackage = function (package) {
        $http.get("apipackage.php?id=" + package).then(function (data) {
            vm.package = data;

            var modalInstance = $uibModal.open({
                animation: true,
                templateUrl: 'package.html',
                controller: 'PackageController',
                controllerAs: 'vm',
                resolve: {
                    package: function () {
                        return vm.package;
                    }
                }
            });
        }, function (error) {});
    };
}]);

app.controller('PackageController', ["$uibModalInstance", "package", function ($uibModalInstance, package) {
    var vm = this;
    vm.package = package;
}]);

在主 php 文件中，我根据文档包含以下内容。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-touch.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

当我在主 php 文件中找到模板时，我无法弄清楚为什么会出现找不到模板的错误。

你们能帮我弄清楚如何解决这个错误吗？

提前致谢！

【问题讨论】：

标签： php angularjs angular-ui-bootstrap bootstrap-modal

【解决方案1】：

您正在使用 ui-bootstrap 脚本的无模板版本，因此 Angular 找不到模态请求的 window.html 模板。

替换

http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap.min.js

与

http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap-tpls.min.js

或者只是手动添加modal template。

【讨论】：