javascript - 当我单击外部元素时调用一个函数，例如引导带模式关闭

Question

我创建了一个 div 的弹出框。当我点击一个图标时会显示，当我点击关闭按钮时会隐藏。但是如果单击弹出窗口的一侧，我想将其关闭。我可以为此做些什么。我在我的项目中使用 angular 和 ng-show 和 ng-hide 来显示和隐藏 div。任何帮助都是可观的。提前致谢。html代码

<p ng-click="openPopUP()">openPopUp</p>

<div ng-show="popup">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>

Java 脚本

$scope.openPopUP = function(){
$scope.popup = true;
}
$scope.closePopUp= function(){
$scope.popup = false;
}

如果有人在 div 旁边单击，我只想关闭

Answer 1

在您的控制器中：

 angular.element(document.body).on('click', function() {
     $scope.$apply(function() {
         $scope.closePopUp();
     });
 });

Answer 2

首先阅读这篇文章以了解如何关闭弹出窗口。

@pixelbits 解决方案的修复是添加$event.stopPropagation(); 在弹出 div 上。

HTML

<p ng-click="openPopUP()">openPopUp</p>

<div ng-show="popup" ng-click="$event.stopPropagation();">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>

JS

angular.element(document.body).on('click', function() {
     $scope.$apply(function() {
         $scope.closePopUp();
     });
 });

$scope.openPopUP = function(){
 $scope.popup = true;
}
$scope.closePopUp= function(){
 $scope.popup = false;
}