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时,模态对话框是否关闭,默认为turewindowClass
:指定一个class并被添加到模态窗口中
open方法返回一个模态实例,该实例有如下属性
close(result)
:关闭模态窗口并传递一个结果dismiss(reason)
:撤销模态方法并传递一个原因result
:一个契约,当模态窗口被关闭或撤销时传递opened
:一个契约,当模态窗口打开并且加载完内容时传递的变量
另外,$modalInstance扩展了两个方法$close(result)
、$dismiss(reason)
,这些方法很容易关闭窗口并且不需要额外的控制器
- angularJs模态框点击空白不隐藏
- UIAlertControllerStyleActionSheet 点击空白处不隐藏问题
- 点击空白隐藏键盘
- 点击空白处隐藏
- 点击空白处让弹窗隐藏
- 点击空白处隐藏
- 点击空白处隐藏div
- 点击空白处隐藏键盘
- 点击空白区域,div隐藏
- editbox点击空白隐藏键盘
- 点击空白 隐藏软键盘
- 点击空白处隐藏div
- 点击空白处隐藏DIV
- 点击空白处隐藏div层
- android 点击空白隐藏软键盘
- 点击键盘以外空白区域隐藏键盘
- android 点击空白隐藏软键盘
- 点击空白处隐藏键盘的手势
- Open Baidu webpage and type in Chinese characters to start searching, press “Back” button to go to B
- RRC连接重配置
- 学习SpringMVC(十八)之JSR303数据校验
- Picasso 图片请求库(工具类)
- JavaScript学习
- angularJs模态框点击空白不隐藏
- 《统计学习方法》——概论
- HDU 1669 Monkey and Banana
- Linux Netfilter实现机制和扩展技术
- 由Maven管理jar文件找不到而引出的问题java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRunt
- centos7安装docker
- Dubbo注册中心
- POJ 1251
- ZOJ-1610 Count the Colors