javascript - 我可以观看 Angular js 中的点击吗？我需要关闭从外部事件发送的弹出窗口

Question

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

在那个指令中触发了一些事件(是外部的，我不必在那里做任何事情)使用 $scope.$emit("someEvent")，我在我的 Controller 中接收到它 $scope.$on("someEvent", function(event){//这里打开一个包含信息的弹出窗口})

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

现在我的 Controller 中有这个结构

$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...
})

我必须从所有 View 中捕获点击，任何点击都应该被捕获。我试过 document.getElementById("idview").onclick = function () { $scope.closePopup() }; 在 $scope.$on("someEvent") 但这是第一次触发并且永远不会显示，因为在同一次点击中打开和关闭。这就是为什么我用新的 $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 之外的任何地方(所以:在 .popin-background 元素)您将关闭 popin(= 删除 .visible 类)。

然后你可以用CSS处理它的显示/动画。

我没有使用您的方法(事件发射器/监听器)，因为它在这里似乎没有必要，Angular 已经监听其作用域变量以进行更改，因此您可以使用你的看法。