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

在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等基本用法即可！

转载于:https://my.oschina.net/u/3492622/blog/1509975