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

6 views
Skip to first unread message

sandeep tc

unread,
Dec 7, 2016, 4:13:19 AM12/7/16
to Angular
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:


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



Screen Shot 2016-12-06 at 10.51.22 PM.png

Sander Elias

unread,
Dec 7, 2016, 11:04:59 AM12/7/16
to Angular
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
Reply all
Reply to author
Forward
0 new messages