Angularjs 角度模式允许用户点击它
我的angularJS应用程序中有一个模态对话框，但当用户单击模态后面的灰色站点时，模态关闭。我希望模态像模态一样工作，也就是说，你必须对里面的东西做出反应才能让它关闭。有人能告诉我如何做到这一点吗？这是一个jsbin： 编辑：代码供将来参考：Angularjs 角度模式允许用户点击它,angularjs,modal-dialog,Angularjs,Modal Dialog,我的angularJS应用程序中有一个模态对话框，但当用户单击模态后面的灰色站点时，模态关闭。我希望模态像模态一样工作，也就是说，你必须对里面的东西做出反应才能让它关闭。有人能告诉我如何做到这一点吗？这是一个jsbin： 编辑：代码供将来参考： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<button ng-click='toggleModal()'>Open Modal Dialog</button>
<modal-dialog show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
</div>
</body>
</html>
app = angular.module('ModalDemo', []);
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
}]);
JS-Bin
打开模态对话框
模态内容在此显示
app=angular.module（'ModalDemo'，[]）；
app.directive（'modalDialog'，function（）{
返回{
限制：'E'，
范围：{
显示：'='
},
replace:true，//替换为下面的模板
transclude:true，//我们希望在指令中插入自定义内容
链接：函数（范围、元素、属性）{
scope.dialogStyle={}；
if（属性宽度）
scope.dialogStyle.width=attrs.width；
if（属性高度）
scope.dialogStyle.height=attrs.height；
scope.hideModal=函数（）{
scope.show=false；
};
},
模板：“X”
};
});
app.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.modalShown=false；
$scope.toggleModal=函数（）{
$scope.modalShown=！$scope.modalShown；
};
}]);
var modalInstance = $modal.open({
templateUrl: '/App/Documents/Templates/DeleteDocumentDialogTemplate.html',
backdrop: 'static'
});
在指令模板的这一部分中，remove ng click='hideModal（）'就完成了
<div class='ng-modal-overlay' ng-click='hideModal()'>