[英]Angular JS, UI-Bootstrap Failed to load template
I am trying to use UI bootstrap modal for my project. 我正在尝试为我的项目使用UI引导模式。 But I am having problem while loading the template. 但是加载模板时出现问题。 I saw many posts saying that I have to include the right script file called ui-bootstrap-tpls.js however, I think I might have different problem that I can't find solutions for. 我看到很多帖子都说我必须包括正确的脚本文件ui-bootstrap-tpls.js,但是,我认为我可能有其他问题,无法找到解决方案。
Here are the error messages 这是错误消息
angular.js:12701 GET http://localhost:63342/project/app/uib/template/modal/window.html 404 (Not Found)
angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
at angular.js:88
at angular.js:20203
at angular.js:17000
at m.$digest (angular.js:18182)
at m.$apply (angular.js:18480)
at l (angular.js:12501)
at XMLHttpRequest.s.onload (angular.js:12655)
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
(anonymous) @ angular.js:20207
(anonymous) @ angular.js:17000
$digest @ angular.js:18182
$apply @ angular.js:18480
l @ angular.js:12501
s.onload @ angular.js:12655
angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
at angular.js:88
at angular.js:20203
at angular.js:17000
at m.$digest (angular.js:18182)
at m.$apply (angular.js:18480)
at l (angular.js:12501)
at XMLHttpRequest.s.onload (angular.js:12655)
here is my code. 这是我的代码。
app.js app.js
var myApp = angular.module(
'myApp',
['agGrid','ngMaterial','ngMessages','ui.bootstrap']
);
index.html (this script comes after the angular.js is loaded and before mainController.js is loaded index.html(此脚本在angular.js加载之后,mainController.js加载之前
<script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js">
</script>
mainController.js mainController.js
myApp.controller('mainController',
function mainController ($scope, $uibModal, $document) {
function myRowClickedHandler(event) {
var modalInstance = $uibModal.open(
{
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: '../app/myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
resolve: {
items: function () {
return $ctrl.items;
}
}
});
}
}
https://plnkr.co/edit/?p=preview https://plnkr.co/edit/?p=preview
https://angular-ui.github.io/bootstrap/ https://angular-ui.github.io/bootstrap/
please refer this. 请参考这个。 you need to add these dependancies also. 您还需要添加这些依赖关系。 please refer the standerd plunker link 请参考标准的矮人链接
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.