angularJs模态框点击空白不隐藏

来源:互联网 发布:建筑模型动画软件 编辑:程序博客网 时间:2024/05/29 18:02

view界面:

<div ng-controller="BusinessMsgCtrl" backdrop="false">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true" ng-click="cancel()">×</button>
<h4 class="modal-title" id="myModalLabel">商户详细信息324534563</h4>


</div>


<div class="modal-body" id="modal-body">
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
商户名称:{{object.busiName}}
</div>
</div>


<div class=row>
<div class="col-md-4"></div>
<div class="form-group col-md-4">
商户编码:{{object.busiCode}}
</div>
</div>


<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
商户状态:{{object.status}}
</div>
</div>


<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
商户地址:{{object.busiAddress}}
</div>
</div>


<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
商户地址:{{object.busiDesc}}
</div>
</div>


</div>


<div class="modal-footer text-center">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">确定</button>
</div>

</div>

<script>

//调取模态框的方法

function getBasicMadol(url, $modal, $scope,backdrop) {
var modalInstance = $modal.open({
backdrop:false,                                  //添加属性点击空白不隐藏
templateUrl : url,
controller : ModalInstanceCtrl,
resolve : {
object : function() {
return $scope.object;
}
}
});
modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
console.log('modal is opened');
});
modalInstance.result.then(function(result) {
// console.log(result);
}, function(reason,e) {

console.log(reason);// 点击空白区域,总会输出backdrop click,点击取消,则会暑促cancel
// $log.info('Modal dismissed at: ' + new Date());
});
return modalInstance;
}


var ModalInstanceCtrl = function($scope, $modalInstance, object) {


$scope.object = object;
$scope.ok = function() {

$modalInstance.close($scope.selected);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};

</script>



控制器:

app.controller('BusinessMsgCtrl', ['$scope', '$rootScope','BusinessService','T', '$uibModal',function ($scope,$rootScope,BusinessService,T, $modal) {


//切换商户状态
$scope.updateBusiStatus = function (obj) {
var data = { id: obj.id };
var status = 1;


if (obj.status == 1) {
status = 2
}
data.status = status;


BusinessService.updateStatus(data).success(function (response) {
if (response.success){
$rootScope.businessquery();
} else {
toastr.error(response.errMsg);
}
});
};


// 添加用户
$scope.optionBusinessData = function(obj){
getBasicMadol('partials/businessTpls/edit.html',$modal,$scope);
};


//修改(弹出编辑界面)
$scope.editBusinessData = function(obj){
$scope.object = obj;
getBasicMadol('partials/businessTpls/edit.html',$modal,$scope);
};


//清空表单
$scope.clearForm = function () {
$scope.object = null;
$scope.businessForm.$setPristine();
$rootScope.$broadcast('clear');
};


// Calls the rest method to save a master.(向服务器提交数据)
$scope.updateBusiness = function () {
if($scope.object.id==null||$scope.object.id==''){
BusinessService.save($scope.object).success(function(response) {
if(response.success){
$scope.cancel();
$rootScope.businessquery();
toastr.success('操作成功');
}else{
toastr.error(response.errMsg);
}
});
}else{
BusinessService.update($scope.object).success(function(response) {
if(response.success){
$scope.cancel();
$rootScope.businessquery();
toastr.success('操作成功');
}else{
toastr.error(response.errMsg);
}
$scope.object = null; //将object置空
});
}
};


//删除单个商户
$scope.deleteBusiness = function (obj) {
BusinessService.deleteBusiness({id: obj.id}).success(function (response) {
if(response.success){
$rootScope.businessquery();
toastr.success('操作成功');
}else{
toastr.error(response.errMsg);
}
});
};


//详情
$scope.businessInfo = function(obj){
$scope.object = obj;
getBasicMadol('partials/businessTpls/info.html',$modal,$scope);
$scope.object = null;
};
}]);


//问题参考:

$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),这些方法很容易关闭窗口并且不需要额外的控制器









1 0
原创粉丝点击