angular modalInstance模态框

最新推荐文章于 2024-09-03 21:30:32 发布

wyn314

最新推荐文章于 2024-09-03 21:30:32 发布

阅读量578

点赞数

分类专栏： angular 常用插件文章标签： angular modalInsta 模态对话框

本文链接：https://blog.youkuaiyun.com/csdnwyn314/article/details/76886156

版权

angular 常用插件专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用AngularJS和Angular UI Bootstrap快速实现模态窗口功能。通过具体代码示例展示了模态窗口的创建过程，包括配置不同尺寸的模态框、自定义模态内容以及与用户交互的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际开发的过程中点击一个按钮或者文字弹出一个modal是很常见的问题
直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>
<body ng-app="myApp" style="background:#4A4A4A" class="row">
<div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平台</div>
<section class="row" >
    <section ng-controller="modalDemo" class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;">
        <script type="text/ng-template" id="myModelContent.html">  //创建一个局部视图，需要的时候引用它， 下面会用到   script部分代码可以独立写成一个html文件
        <div class="modal-header"> // modal头部 。body  footer 类推
            <h3 class="modal-title">html5jq模态框</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{item}}</a> //显示当前点击的item
                </li>
                当前选择： <b>{{selected.item}}</b>
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">
                确认
            </button>
            <button class="btn btn-warning" ng-click="cancel()">退出</button>
        </div>
        </script>
        <button class="btn btn-info" ng-click="open()">点我！</button>
        <button class="btn btn-default" ng-click = "open('lg')">大模态</button>  //lg 大模态，sm小模态
        <button class="btn btn-default" ng-click = "open('sm')">小模态</button>
        <hr>
        <div ng-show="selected">当前选择：{{selected}}</div>
    </section>
</section>
</body>
<script>
    angular.module('myApp',['ui.bootstrap']).controller('modalDemo',function($scope,$modal,$log){ //
        $scope.items = ['html5','jq','FE-演示平台'];
        $scope.open = function(size){  //打开模态
            var modalInstance = $modal.open({
                templateUrl : 'myModelContent.html', //创建的视图，即modal对应的html文件
                controller : 'ModalInstanceCtrl',// 初始化模态范围，即该modal的controller
                size : size, //大小配置不能自定义大小，只能是sm，md，lg等这些值
                backdrop: false,// 是否要遮罩层，不设置默认为有遮罩层点击遮罩层模态框消失，false 没有遮罩层
                resolve : {//定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()，注意黄色背景区域
                    items : function(){
                        return $scope.items;
                    }
                }
            })
//            x.x.x.x.x  在这可以把父controller的变量进行传递，以便modal的controller使用
//            eg:modalInstance.orderId = $scope.orderId;在controller中可以使用$modalInstance.orderId来
//            使用父控制器的$scope.orderId，如果是二级的命名($scope.XX.XX)则不需要通过这个变量传递直接在子控制器中
//            使用即可
            modalInstance.result.then(function(selectedItem){//$modalInstance.close()正常关闭后执行的函数
                $scope.selected = selectedItem;
            },function(){//$modalInstance.dismiss('cancel')后执行的函数，取消或退出执行的函数
                $log.info('Modal dismissed at: ' + new Date())

            })
        }
    })
    angular.module('myApp').controller('ModalInstanceCtrl',function($scope,$modalInstance,items){ //依赖于$modalInstance必须先注入
        $scope.items = items;
        $scope.selected = {
            item : $scope.items[0]
        };
        $scope.ok = function(){
            $modalInstance.close($scope.selected.item); //关闭并返回当前选项
        };
        $scope.cancel = function(){
            $modalInstance.dismiss('cancel'); // 退出或者取消
        }
    })
</script>
</html>

知识点解析：

$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们

$modal仅有一个方法open(options)

templateUrl：模态窗口的地址

template：用于显示html标签

scope：一个作用域为模态的内容使用（事实上， $modal会创建一个当前作用域的子作用域）默认为$ rootScope

controller：为 $modal指定的控制器，初始化$ scope，该控制器可用$modalInstance注入

resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()

backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭

keyboard：当按下Esc时，模态对话框是否关闭，默认为ture

windowClass：指定一个class并被添加到模态窗口中

open方法返回一个模态实例，该实例有如下属性

close(result)：关闭模态窗口并传递一个结果

dismiss(reason)：撤销模态方法并传递一个原因

result：一个契约，当模态窗口被关闭或撤销时传递

opened：一个契约，当模态窗口打开并且加载完内容时传递的变量

另外， $modalInstance扩展了两个方法$ close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器