Anglurjs之弹出模态框_angular 监听鼠标事件弹出模态框

实现功能：新增弹出模态框，编辑弹出模态框，并将主页面数据带到模态框，保存提交表单。

主要有几个点，怎么将模态框显示出来，怎么传参，怎么获取模态框中文本框的值，编辑时文本框怎么带入值

说得再多都不如代码直观。

下面是html页面

<button class="btn m-b-xs btn-sm btn-primary btn-addon" data-toggle="modal" data-target="#matchRuleDialog" id="addDict"  ng-click="openModal('add')"><i class="fa fa-plus"></i>新增</button>
<button class="btn m-b-xs btn-sm btn-primary btn-addon" id="editDict" ng-click="openModal('edit')"><i class="fa fa-plus"></i>编辑</button>

这个是新增和编辑按钮，用来弹出模态框。 ng-click="openModal()，里面的参数edit和add是用于js中 辨别新增还是编辑的。

下面是模态框，两段代码放在同一个HTML页面

<script type="text/ng-template" id="modal.html"> 
 
<div class="hbox" id="matchRuleDialog" data-backdrop="static" 
    data-keyboard="false" aria-hidden="true">
    <div >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="cancel()">
                    <span>&times;</span>
                </button>             
            </div>
            <div class="modal-body">
               <form name="form-contact" class="form-validation" ng-submit="submitForm()">
              <input type="hidden" ng-model="dict.dictId" >
              <input type="hidden" name="matchItemValue" ng-model="dict.parentId">
                    <div class="form-group">
                        <label class="control-label col-lg-3 col-sm-3 col-xs-3"
                            for="matchItemValue-input"> <span
                            id="tv-iui-matchItemValueLabel">数据字典编码</span> <span
                            class="required">*</span>
                        </label>
                        <div class="col-lg-7 col-sm-7 col-xs-7">
                            <input type="text" class="form-control" id="dictCode"
                                name="matchItemValue" ng-model="dict.dictCode" required>
                            <span style="color: red"
ng-show="mainCtrl.matchRuleForm.matchItemValue.$dirty && mainCtrl.matchRuleForm.matchItemValue.$invalid">
                                <span
ng-show="mainCtrl.matchRuleForm.matchItemValue.$error.required"
                                id="tv-iui-requiredWarning">必填项</span>
                            </span>
 
                        </div>
                    </div>
 
                           
                    <div class="form-group">
                        <label class="control-label col-lg-3 col-sm-3 col-xs-3"
                            for="promiseSpeed-input"> <span
                            id="tv-iui-promiseSpeedLabel">数据字典名称</span> <span
                            class="required">*</span>
                        </label>
                        <div class="col-lg-7 col-sm-7 col-xs-7">
                            <input type="text" class="form-control" id="promiseSpeed-input"
                                name="promiseSpeed" ng-model="dict.dictName" required>
                            <span style="color: red"
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$dirty && mainCtrl.matchRuleForm.promiseSpeed.$invalid">
                                <span
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$error.required"
                                id="tv-iui-requiredWarning">必填项</span> <span
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$error.pattern"
                                id="tv-iui-patternWarning">不符合规则</span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-3 col-sm-3 col-xs-3"
                            for="promiseBandwidth-input"> <span
                            id="tv-iui-promiseSizeLabel">数据字典类型</span> <span
                            class="required">*</span>
                        </label>
                        <div class="col-lg-7 col-sm-7 col-xs-7">
                            <input type="text" class="form-control"
                                id="promiseBandwidth-input" name="promiseSize"
ng-model="dict.dictType" required> <span
                                style="color: red"
ng-show="mainCtrl.matchRuleForm.promiseSize.$dirty && mainCtrl.matchRuleForm.promiseSize.$invalid">
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-3 col-sm-3 col-xs-3" for="promiseSpeed-input"> <span
                            id="tv-iui-peakSpeedLabel">备注</span>
                        </label>
                        <div class="col-lg-7 col-sm-7 col-xs-7">
                            <input type="text" class="form-control" id="peakSpeed-input"
name="peakSpeed" ng-model="dict.remark" >                         
                        </div>
                    </div>
 <div class="modal-footer">              
                    <button type="submit" class="btn btn-success" id="saveButton">保存</button>
                <button class="btn btn-default" ng-click="cancel()"
                    id="tv-iui-matchRule-cancle">取消</button>
            </div>
                </form>
            </div>
           
        </div>
    </div>
</div>
</script>

<script type="text/ng-template" id="modal.html"> 指名ng模板，id是实际使用模板的引用，标签中的内容才是真正的模板。

data-backdrop="static" 是点击背景空白处窗口不关闭，data-keyboard="false"触发ESC事件时不关闭， aria-hidden="true"

下面是js代码，用于打开模态框，在主页面的app.controller的参数必须有$modal

//打开模态框	 
$scope.openModal = function(add) {
        var modalInstance = $modal.open({
            templateUrl : 'modal.html',//script标签中定义的id
            controller : 'modalCtrl',//modal对应的Controller
            resolve : {
                data : function() {//data作为modal的controller传入的参数
                     return $scope.dict.Id+","+add;//用于传递数据
                }
            }
        })
    }

app.controller('modalCtrl', function($scope, $modalInstance, data,$http,$state) {
	var strs= new Array(); //定义一数组 
	strs=data.split(","); //字符分割
    $scope.data= data;   
    $scope.dict={};
    //在这里处理要进行的操作
    $http({
		method: 'post',
		url: '/Dict/getDictByPrimaryKey',
		params: {
			dictId: strs[0]
		},
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
	}).then(function(resp) {
			if(strs[1]=="add")
				{
				//执行某些操作
				}
			if(strs[1]=="edit")
			{
                                //给模态框中的文本框赋值    
				$scope.dict.dictCode = resp.data.data.dictCode;
				$scope.dict.dictName = resp.data.data.dictName;
				$("#promiseBandwidth-input").attr("readonly",true);
				$scope.dict.dictType = resp.data.data.dictType;	
 
		},
		function(resp) {
			 
		});
    $scope.ok = function() {//点击确定按钮关闭模态框
        $modalInstance.close();
    };
    $scope.cancel = function() {取消关闭
        $modalInstance.dismiss('cancel');
    }
 
 
    
	// 保存菜单信息
	$scope.submitForm = function() {
		$http({
			method: 'post',
			url: '/Dict/saveDict',
			data: $.param($scope.dict),
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(function(resp) {
			if(resp.data.code == '0') {
				// 关闭也面
				 $modalInstance.close();
				 $state.reload();
			} else {
				 layer.msg(resp.data.message);
			}
		}, function(resp) {
			
			
		});
	};