angularJs模態框點選空白不隱藏
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)，這些方法很容易關閉視窗並且不需要額外的控制器