文章标题 AngularJs 之模态框

最新推荐文章于 2025-05-26 16:53:33 发布

原创最新推荐文章于 2025-05-26 16:53:33 发布 · 796 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #modal

angularjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用AngularJS中的$modal服务创建模态框，包括依赖模块、模态框创建方式、事件处理等核心内容，并通过具体代码示例详细说明了如何在实际项目中应用这些知识。

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

1、依赖的模块：$modal、$modalInstance
2、模态框创建：$modal.open(paramObj)，传入的参数是一个对象，这个对象有三个重要的属性（templateUrl/template,controller,resolve),分别是模态框需要的模板、控制器以及传递的参数，需要注意的是，如果模态框引用了templateUrl中的html文件，那么这个html文件里不能有ng-controller，因为这option中已经配置了controller，否则会报错，另外一个常用但是非必要的属性为size
3、模态框事件处理：modalInstans.result.then(param1,param2),modalInstans为$modal.open()实例，利用then（）方法处理模态框的事件，传递给then()的两个参数都是function,param1处理close event，param2处理dismiss event
4、代码演示

//文件1：admin/teachResearchManage/js/controllerDR.js
//一个按钮的处理函数
$scope.improveInfos = function(data,size){
            //modalInstance 为模态框实例
           var modalInstance = $modal.open({
           //弹框需要的模板文件，也可以用template属性直接给html代码
            templateUrl : 'admin/teachResearchManage/improveInfos.html',
            //此处给了控制器，所以improveInfos.html文件里面不能再有ng-controller，否则控制器就多了，会报错
            controller : 'improveInfosController',
            //常用但非必要的属性
            size : size || 'lg',
            //传递到模态框的参数
            resolve : {
                jsonString :function(){
                    return data;
                },
                host : function(){
                    return $scope.app.host;
                }
            }
        });
        // 处理模态框对应操作的事件
        modalInstance.result.then(function(params) {//处理close event,接收传递的参数：params
            $http.post($scope.app.host+"student/updateStudent?requestId=test123456",params)
                .success(function(data){
                    $scope.getStudentCategoryList($scope.currentPage,10);
                })
        }, function() {//处理dismiss event
            $log.info('Modal dismissed at: ' + new Date());
        });
        //$state.go('app.teachResearchManage.improveInfos',{jsonString:angular.toJson(data)});
    };


//文件2：admin/teachResearchManage/js/controllerLD.js，包含了两个controller
//模态框中resolve传递的参数jsonString,host需要引入
app.controller("infoCtrl",function($scope,$modalInstance,$modal,jsonString,host){
//保存 button
    $scope.saveInfos = function(){
        if(!($scope.selected!=null &&$scope.selected.length>0 && $scope.formData.gradeCode!=null)){
            $scope.warningMessage ='只有一次完善信息的机会，请完善全部信息！';
            return false;
        }else{
            $scope.warningMessage =''
        }
        var params = {
            "code":jsonString.code,//传递的参数jsonString
            "userClassSubject": angular.toJson($scope.selected),
            "accessionYear":$scope.formData.enterShoolYear,
            "year":$scope.formData.gradeCode,
            "completion":2,//已修改
            "teachArea":$scope.corseBookDistrictList[0].name,
            "teachAreaCode":$scope.corseBookDistrictList[0].code
         };
      //模态框中嵌套模态框
        var modalInstance = $modal.open({
            templateUrl:"admin/info.html",
            controller:"infoCtrl",
            size:"md",
            resolve:{
                msg : function(){return "确定保存此次完善的信息吗？"}
            }
        });
        //then(param1,paranm2)第一个参数处理close event,第二个参数处理 dismiss event
        modalInstance.result.then(function(){
            $modalInstance.close(params);//“确定”的时候传递参数：params
        });
    };
    //取消 button
    $scope.cancel = function(){
        $modalInstance.dismiss('cancel');
    };
 };
//teachResearchManage/js/controllerLD.js
//嵌套模态框的controller--infoCtrl以及传递的参数msg
app.controller("infoCtrl",function($scope,$modalInstance,msg){
    $scope.info = msg;
    //确认
    $scope.ok= function () {
        $modalInstance.close();//“确定”的时候没有传递参数
    };
    //取消
    $scope.cancelOpt = function(){
        $modalInstance.dismiss("cancel");//“取消”的时候传递一个取消的原因
    };
});


//文件3: admin/info.html
    <div class="modal-header">
        <h4></h4>
    </div>
    <div class="modal-body">
        <p class="text-center modal-body-content">{{info}}</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">确定</button>
        <button class="btn btn-default" ng-click="cancelOpt()">取消</button>
    </div>
    <style>
        .modal-body-content{
            font-size: 24px;
        }
    </style>
//文件4: admin/improveInfos.html
<!--ng-controller="improveInfosController"-->
<div class="panel panel-info" >
    <div class="panel-heading">
        <div class="panel-title"><h3>目标分类</h3></div>
    </div>
    <div class="panel-body">
        <div class="col-sm-12 wrapper">
            <form class="form form-horizontal" ng-init="load()">
                <!--公共过滤条件-->
                <div ng-include="'admin/common/tpl/filterImproveData.html'"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">入学年份：</label>
                    <div class="col-sm-4">
                        <select ng-model ="formData.enterShoolYear" ng-options="year.yearCode as year.yearName for year in yearList"  class="form-control m-b select-inline">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="control-label col-sm-2">地区：</label>
                    <div class="col-sm-4">
                        <!--ng-init="getAllProvinceList()"-->
                        <select ng-model="formData.province" ng-options="pro.provinceCode as  pro.provinceName for pro in provinceList" ng-value="pro.provinceCode" ng-change="getCorseBookDistrict(formData.province)" class="form-control m-b select-inline" >
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group" ng-show="teachDistrictFlag">
                    <label class="col-sm-2 control-label">教学大区：</label>
                    <div class="radio">
                        <!--ng-checked="corseBookDistrict.checked"-->
                        <label class="i-checks" ng-repeat="corseBookDistrict in corseBookDistrictList">
                            <input type="radio" name="teachDistrict" ng-value="corseBookDistrict.code" ng-model="formData.corseBookDistrict" ><i></i>{{corseBookDistrict.name}}
                        </label>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg" ng-show="teachDistrictFlag"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">目标类型：</label>
                    <div class="radio">
                        <label class="i-checks" ng-repeat="aim in aimDataList track by $index">
                            <input type="radio" name="aimType" ng-value='aim.aimType' ng-model="formData.aimData"><i></i>{{aim.aimName}}
                        </label>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <span style="color:red;">{{warningMessage}}</span>
                <button class="btn btn-default pull-right" style="margin-right: 50px;" ng-click="cancel()">取消</button>
                <button class="btn btn-primary pull-right" style="margin-right: 20px;" ng-click="saveInfos()" ng-disabled="validFlag">保存</button>
            </form>
        </div>
    </div>
   <!-- <div class="panel-footer">
        <button class="btn btn-primary pull-right" style="margin-right: 50px;" ng-click="getList()">关闭</button>
    </div>-->
</div>