我可以在角度 js 中观看点击吗?我需要关闭从外部事件调度的弹出窗口

Question

>我有一个巨大的应用程序，其中包含大量信息和不同的功能。有一个外部 d3 指令(d3 图形嵌入在我正在处理的视图中(，当我单击图形上的某些点时，我有另一个弹出窗口。

该指令中触发了一些事件(是外部的，我不必在那里做任何事情(，带有$scope.$emit("someEvent")，我在控制器中收到了它$scope.$on("someEvent", function(event){//here a pop up with information is opened})

我的功能需要点击几下仍然触发新闻弹出窗口(总是会显示最后一个，并且已经通过发出 someEvent 解决了(问题出在弹出窗口之外的其余点击，我怎样才能让他们关闭它？

现在我的控制器中有这个结构

$scope.closePopup = function () {
  $scope.showPopup = false;
}
$scope.$on("someEvent", function(event){
  //here a pop up with information is opened not always is true
  //if a dont have information is false, this is just representative
  $scope.showPopup = true;
  if ($scope.showPopup) {
    $scope.$emit("popupOpened");
  }
}) 
$scope.$on("popupOpened",function (event) {
  //and here i need to add a listener o something for catching clicks 
  //and asociate them to the $scope.closePopup () function.
  //also, i need to know if thoose clicks are firing someEvent to...
})

我必须从所有视图中捕获点击，任何点击都应该被捕捉。我已经尝试过$scope.$on("someEvent") document.getElementById("idview").onclick = function () { $scope.closePopup() };，但这第一次被触发并且从未出现，因为在同一单击中打开和关闭。这就是为什么我用新$emit重构它的原因

我很欣赏这样做的一些方法或线索！

谢谢！

Answer 1

要打开/关闭弹出窗口，您只需在弹出容器或文档应用程序的body标签上添加/删除类。

使用您提到的$scope.showPopin的示例：

<button ng-click="showPopup = !showPopup">Toggle the popup !</button>
...
<div class="popin-container" ng-class="showPopup ? 'visible' : ''">
  <div class="popin-background" ng-click="showPopup = false"></div>
  <div class="popin"></div>
</div>

假设.popin-background是 popin 后面的元素(透明与否(，那么如果您单击弹出框之外的任何位置(因此：在.popin-background元素中(，您将关闭 popin(= 删除.visible类(。

然后，您可以使用CSS处理其显示/动画。

我没有使用您的方法(事件发射器/侦听器(，因为这里似乎没有必要，Angular 已经侦听其范围变量进行更改，因此您可以在您的视图中使用。