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>

图片描述

阅读 3k
1 个回答

text/ng-template 是寄存在 $templateCache,所在你调用方式不对,应该换成:

                    var modalInstance=$uibModal.open({
                        template: 'myModalContent.html',
                        controller:'ModalInstanceCtrl',
                        size: size
                    });

templateUrl 换成 template

-------------------update

应该是你没有加载模板的文件。

图片描述

因为他好像是分开的,如果你是Npm加载包的话。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题