在用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
,所在你调用方式不对,应该换成:即
templateUrl
换成template
。-------------------update
应该是你没有加载模板的文件。
因为他好像是分开的,如果你是Npm加载包的话。