<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
引入了angular-ui-bootstrap插件
<title>Document</title>
</head>
<body ng-app="app">
<div class="body" style="margin: 200px auto;padding: 50px;background: lightcoral;" ng-controller="myModal">
<button class="btn btn-warning btn-lg" ng-click="open('lg')">大</button>
<button class="btn btn-warning" ng-click="open()">中</button>
<button class="btn btn-warning btn-sm" ng-click="open('sm')">小</button>
</div>
</body>
</html>
设置了3个按钮 大的模态框，中的和小的。对应着bootstrap 中的modal样式
在另一个HTML配置弹出来的对话框模板 如下：
<div class="modal-header"> //分为头部
<h3 class="modal-title">title</h3>
</div>
<div class="modal-body"> //身体
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{item}}</a>
</li>
当前选择： <b>{{selected.item}}</b>
</ul>
</div>
<div class="modal-footer"> // 底部
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">cancel</button>
</div>
最关键的script 部分
angular.module('app',['ui.bootstrap']).controller('myModal',function ($scope,$modal) {
$scope.items = ['h5', 'c3', 'js'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html', //指向上面创建的视图
controller: 'Ctrl',// 初始化模态范围 对应着下面Controller
size: size, //大小配置 size是变量，根据open里面参数
resolve: {
items: function () {
return $scope.items;
}
}
})
}
})
.controller('Ctrl',function ($scope,$modalInstance,items) {
$scope.items = items; 对话框里面显示items数组的参数
})
亲测，可用
