angular ui bootstrap popover open programmatically

Question

I am trying to open the popover dynamically by setting popover-is-open property to true dynamically from the controller like this:

    var el = angular.element(target.id); //popover attached to this element
    el.attr('popover-is-open',true) //setting attribute to true
    $compile(el.contents())($scope) //recompiling
    $scope.$digest();//running digest

Here is the html

<div id="taskcard-{{task.externalId}}" 
     popover-append-to-body="true" 
     popover-trigger="'none'" 
     popover-is-open="false"
     uib-popover-template="templateurl" 
     popover-title="testing">
          POPOVERS
</div>

Now, this doesn't work. Is there any other way around this?

can you please post full code including html here

jitender
– jitender

2017-11-29 03:30:49 +00:00
Commented Nov 29, 2017 at 3:30 — jitender
– jitender, Commented Nov 29, 2017 at 3:30
@jitender check above

beNerd
– beNerd

2017-11-29 03:34:56 +00:00
Commented Nov 29, 2017 at 3:34 — beNerd
– beNerd, Commented Nov 29, 2017 at 3:34

jitender · Accepted Answer · 2017-12-10 07:37:27Z

2

You can use some Boolean flag instead something like task.popoverIsOpen in popover-is-open attribute and can set it to true or false to open/close popover something like

 <div id="taskcard-{{task.externalId}}" 
     popover-append-to-body="true" 
     popover-trigger="'none'" 
     popover-is-open="task.popoverIsOpen"
     uib-popover-template="dynamicPopover.templateUrl" 
     popover-title="testing">
          POPOVERS
</div>

Set popoverIsOpen to true when you need

task.popoverIsOpen=true;

Working demo

edited Dec 10, 2017 at 7:37

answered Nov 29, 2017 at 3:53

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

beNerd Over a year ago

can't use it. i have like 100 popovers! can't maintain separate flag for each. And if i keep only one flag, all the popovers will open and close together :)

jitender Over a year ago

you mean to say you are using it inside ng-repeat of tasks right?

beNerd Over a year ago

actually i have a requirement that all only one popover should be open at a time. So in your plunker user can have all the popovers open.

jitender Over a year ago

@beNerd check out update plunker

beNerd Over a year ago

there is still a issue: instead of ng-click, I need to use ng-mouseenter and popover should be removed on mouseleave. i tried replacing ng-click with mouseenter but the popover doesn't disappear on mouseleave

|

Collectives™ on Stack Overflow

angular ui bootstrap popover open programmatically

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related