Angular — модал не открывается но выдает ошибку
У меня есть страница PHP с некоторыми функциями PHP и HTML-кодом. Угловое приложение загружается и работает нормально.
Но я добавил модал, чтобы он был открыт, но он дает мне следующую ошибку в консоли.
http://errors.angularjs.org/1.4.8/$ Компилировать / tpload? P0 = UIB% 2Ftemplate% 2Fmodal% 2Fwindow.html&р1 = 404&p2 = Не% 20Found
Ошибка говорит, что это происходит, когда шаблона нет, но он есть.
Пожалуйста, помогите мне разобраться в этом!
Мой основной файл php (тег body)
<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.
Не могли бы вы, ребята, помочь мне разобраться, как решить эту ошибку?
Заранее спасибо!
Решение
Вы используете версию без шаблона ui-bootstrap сценарий, так что угловой не может найти 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
или просто вручную добавьте модальный шаблон вместо.
Другие решения
Других решений пока нет …