html - angularjs和UIbootstrap结合写模态框报模版加载失败问题
本文介绍了html - angularjs和UIbootstrap结合写模态框报模版加载失败问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在用angularjs和UIbootstrap写模态框时总是报模版加载错误，求大佬告知哪错了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>Title</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="ui-bootstrap.js"></script>
<script>
angular.module('myApp',['ui.bootstrap'])
.controller('ModalDemoCtrl',['$scope','$uibModal',function($scope,$uibModal){
$scope.open=function(size){
var modalInstance=$uibModal.open({
templateUrl: 'myModalContent.html',
controller:'ModalInstanceCtrl',
size: size
});
}
}])
.controller('ModalInstanceCtrl',['$scope','$uibModalInstance','$http',function($scope,$uibModalInstance,$http){
$scope.close=function(){
$uibModalInstance.close()
};
$scope.submit=function(){
$uibModalInstance.close();
};
}]);
</script></head>
<body ng-app="myApp">
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<form ng-submit="submit()">
<div class="form-group">
<label for="loginAccount">账号</label>
<input type="text" class="form-control" id="loginAccount" placeholder="Account">
</div>
<div class="form-group">
<label for="loginPassword">密码</label>
<input type="password" class="form-control" id="loginPassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">登陆</button>
</div>
</form>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">click</button></div>
</body>
</html>
解决方案
text/ng-template 是寄存在 $templateCache，所在你调用方式不对，应该换成：
var modalInstance=$uibModal.open({
template: 'myModalContent.html',
controller:'ModalInstanceCtrl',
size: size
});即 templateUrl 换成 template。
-------------------update
应该是你没有加载模板的文件。
因为他好像是分开的，如果你是Npm加载包的话。
这篇关于html - angularjs和UIbootstrap结合写模态框报模版加载失败问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
