我可以在 angular 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 标签上 add/remove 一个 class您的文档应用程序。

使用您提到的 $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 class）。

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

我没有使用你的方法（事件发射器/监听器），因为它在这里似乎没有必要，Angular 已经监听了它的范围变量以进行更改，所以你可以在你的视图中玩。

我可以在 angular js 中查看点击次数吗？我需要关闭从外部事件发送的弹出窗口

Can i watch clicks in angular js? I need to close a pop up dispatched from an external event

javascript

events

event-handling

watch

angularjs