Angular JS: Not able to close Bootstrap Popover on clicking a "X" icon.

[sandeep tc]

Hello Everyone, 

I am developing a popover in an Angular Js environment. 

I am using a directive to render the popover. I am using the basic bootstrap popover function for trigger and placement

For the content, I am using another directive.

My requirement is to place a X icon inside the popover content and on clicking the same I should be able to close the popover.

Here is my code:

https://plnkr.co/edit/NkBlRogIDm1xSFVa8gxL?p=preview

For some reason, the plunker is not showing the popover. However, in my local, I am able to see the popover. 

Could someone please help me to close the popver on clicking the X icon inside the popover.

I am attaching the screenshot of the popover also.

Thanks,

Sandeep

[Sander Elias]

You can do something like this:

.directive('popoverCont', function() {
  popController.$inject = ['$element'];
  return {
    restrict: 'E',
    templateUrl: 'template_popover.html',
    controller: popController,
    controllerAs: "$ctrl"
  };
 
  function popController($element) {
    // use a bit of hackery to fetch the element that contains te popover itself
    var popover = $element[0].parentNode.parentNode.querySelector('[custom-popover]');
    var close =  $element[0].querySelector('#closePop'); // get the button
    close.addEventListener('click', function () {
      console.log('closing on button')
      // this is not working, it looks like the popover prevents clicks.
    })
    console.log('crtl', popover, close)
    document.addEventListener('click', function () {
      console.log('closing from document')
      // do whatever to close the popover..
    })
  }
});

Hope this helps you a tad,

Regards

Sander