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

Question

I have a huge application with a lot of information and different functionalities. There is an external d3 directive (the d3 graphic is embebed on the view that im working on) and i have another popup that show up when i click in some points on the graphic.

Some event is fired in that directive (is external and i dont have to do anything there) with a $scope.$emit("someEvent") , I received it in my controller with $scope.$on("someEvent", function(event){//here a pop up with information is opened})

My functionality needs that a few clicks still firing news pop ups (always the last one will be shown and that is already solved with the emit of someEvent) the problem is with the rest of the clicks outside the pop up, how can I get them for closing it?.

Right now i have this structure in my 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...
})

I have to catch clicks from all the view, any click should be catched. I have tried with document.getElementById("idview").onclick = function () { $scope.closePopup() }; in $scope.$on("someEvent") but this is fired the first time and never show up because is opened and closed in the same click. Thats the reason why I have refactor it with a new $emit

I appreciate some approach or clue for doing this!

Thanks!

Answer 1

To open / close a popup, you can simply add/remove a class on the popup container, or on the body tag of your document app.

Example using $scope.showPopin that you've mentionned :

<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>

Assuming .popin-background is an element (transparent or not) behind your popin, then if you click wherever out of the popin (so : in .popin-background element) you will close the popin (= remove the .visible class).

Then you can handle its display / animation with CSS .

I did not use your approach (event emitters / listeners) as it doesn't seems necessary here, Angular already listens to its scopes variables for change , so you can play with in your view.