浅谈angular-ui-bootstrap-modal这个骚东西

摘要: 基于angular来实现的一个bootstrap模态框

在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.controlle
7fe0
r('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等基本用法即可！