In my WebApp I want to show a customized popover that will be triggered when a variable in my controller is set. To achieve this I've created a custom trigger event and set it with $tooltipProvider.setTriggers({"showChat": "hideChat"}]
Here is a plnkr.co of my code that does not working.
I also checked other solutions here on StackOverflow (like AngularJS Bootstrap Tooltip - trigger on event or Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? ) that seem to work, but I can't figure out where my code is wrong. I assume it's just a little thing (like always.. :-) )
Angular-bootstrap seems to use addEventListener to subscribe to this event, which means you cannot trigger it with .trigger(), what you'll need is dispatchEvent:
if(scope.showPopover) {
console.log('trigger showChat')
element.get(0).dispatchEvent(new Event("showChat"));
} else {
console.log('trigger hideChat')
element.get(0).dispatchEvent(new Event("hideChat"));
}
See in this fixed plunker .
Btw: unless you do something more complicated in your app, you can simply use popover-is-open="showPopover"
to trigger the popover, like in this plunker
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.