在web项目中经常会使用到模态框这么一个东西，bootstrap的modal模块就可以很简单的实现，其实本人是不太喜欢bootstrap这个框架的（美化程度太过简单），没办法，谁让angular对它有很好的支持呢！

今天就来讲讲基于angular再封装的ui-bootstrap中模态框的用法！

话不多说，直接上代码！

首先还是最基本的类库引入

<!-- bootstrap样式表文件 -->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
<!-- angularJs -->
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<!-- 基于angularJs再封装的bootstrap模板文件 -->
<script type="text/javascript" src="lib/angular/ui-bootstrap-tpls.min.js"></script>
<!-- 核心业务逻辑控制器 -->
<script type="text/javascript" src="js/app.js"></script>

然后是html部分

<div ng-controller="mainController"><!-- 定义一个模态框--><script type="text/ng-template" id="model.html"><div class="modal-header"><h3 class="modal-title">模态框标题</h3></div><div class="modal-body"><ul><li ng-repeat="item in items"><a href="javascript:void(0);" ng-click="selected = item">{{item.name}}</a></li></ul></div><div class="modal-footer"><button class="btn btn-primary" type="button" ng-click="ok()">确认</button><button class="btn btn-warning" type="button" ng-click="cancel()">取消</button></div></script><!-- 显示模态框中选中的item --><p>选中的item的名称为:{{selectedItem.name}}</p><!-- 主界面按钮，点击弹出模态框--><button type="button" class="btn btn-default" ng-click="open()">打开</button>
</div>

接着是js部分

//引入ui.bootstrap模块
var app = angular.module('app', ['ui.bootstrap']);
//主控制器中引入$uibModal服务
app.controller('mainController', function ($scope, $uibModal) {//定义一个数组，接下来将其传递给模态框中$scope.items = [{name:'列表一'},{name:'列表二'},{name:'列表三'}];//定义open方法，用来打开模态框$scope.open = function () {//声明一个模态框var modalInstance = $uibModal.open({size: 'lg', //size为模态框的大小,可选值有:'sm','md','lg'animation: true, //是否开启打开模态框的动画效果templateUrl: 'modal.html', //模态框的路径controller: 'modalController', //模态框的控制器resolve: { //这个重要了,用来将主控制器中的数据传递到模态框中items: function () { //声明一个数据对象return $scope.items; //回掉函数中返回该数据的值}}});//接收调用close方法关闭模态框的返回值modalInstance.result.then(function (selectedItem) {$scope.selectedItem = selectedItem;});//接收调用dismiss方法关闭模态框的返回值modalInstance.reason.then(function (reason) {alert(reason);});};
});
//模态框控制器中引入$uibModalInstance服务
app.controller('modalController', function ($scope, $uibModalInstance, items) { //items为接收主控制器中传入的数据//将接收到的数据绑定在scope服务上$scope.items = items;//定义selected对象，用来接收被选中的item$scope.selected = {};//定义ok方法，用来确认并关闭模态框$scope.ok = function () {//关闭模态框,并调用close方法将被选中的数据selected传到主控制器的result方法中$uibModalInstance.close($scope.selected);};//定义cancel方法，用来取消并关闭模态框$scope.cancel = function () {//关闭模态框,并调用dismiss方法返回一个字符串传到主控制器的reason方法中$uibModalInstance.dismiss('取消操作啦！');};
});

是不是很简单呢！

其实angular将其再封装，无非就是引入了主页面和模态框之间的数据传递功能，只要理解以上的resolve、close、result等基本用法即可！