<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css"/>
<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>
</head>
<body ng-app='myapp' >
<h1 ng-controller='mycontroller' ng-click='kitme("lg")'>点我</h1>
<script type="text/ng-template" id="test.html"> //angular的模态框是可以载入一个html页面的，这里通过ng-template来创建一个html模块，也可以创建一个html文件。
<div class="modal-header">
<h3 class="modal-title" id="modal-title">hello</h3>
</div>
<div class="modal-body" id="modal-body">
<h1>就翻身解放了就</h1>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/javascript">
angular.module('myapp',['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('mycontroller',function ($scope,$uibModal){
$scope.item='item465554645';
$scope.kitme=function(size){
var modalInstance=$uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'test.html', //载入的html文件
controller: 'ModalInstanceCtrl', //为载入的文件定义一个控制器
size: size, // size ： lg sm 两值
resolve: { //resolve是成功创建模态框时，将有效数据传给模态框的控制器，模态框的控制通过注入的形式获取，这里传送了一个item的值；
item: function () {
return $scope.item;
}
}
});
modalInstance.result.then(function (selected) { //配合模态框模块执行完毕，成功关闭后执行的回调函数。selected是模态框传过来的值。
alert(selected);
}, function () {
alert('error');
}，function (){
//取消关闭后执行。
});
};
});
angular.module('myapp').controller('ModalInstanceCtrl',function($uibModalInstance,$scope,item){ //此控制器只有在模态框成功打开时才会执行。
$scope.ok = function () {
$uibModalInstance.close('wang'); //close方法会将参数值回调返回。
}; $scope.cancel = function () {
$uibModalInstance.dismiss('cancel'); //关闭模态框，也会执行回调。
};
});
</script>
</body>
</html>