Angular - 模态框打不开但报错

Question

我有一个 PHP 页面，其中包含一些 PHP 功能和 HTML 代码。 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 主文件中有模板时，我不明白为什么会出现找不到模板的错误。

你们能帮我看看如何解决这个错误吗？

提前致谢！

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

Angular - 模态框打不开但报错

Angular - Modal does not open but gives an error

php

angularjs

angular-ui-bootstrap

bootstrap-modal

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

我的 JS 文件