Ui.bootstrap popover-is-open not working properly

Question

I want to not show ui.bootstrap popover with the popover-is-open directive. For example, in the template:

<button class="fa fa-link add-link" uib-popover="popover" popover-is-open="isOpen"> Show popover </i> 

And in the controller:

 angular.module('demoModule').controller('PopoverDemoCtrl', function ($scope) { $scope.isOpen = false; }); 

See plunkr

I expect the popover will never open, but it opens when you click on it. It seems that popover-is-open only affects angular compilation. Any ideas?

upd: Actually, I do not want to show popover only in some cases, in other cases it should be shown. For example, I have a download-dialog dialog, and I want to show it only if the file size is greater than a certain limit.

Answer 1

popover-is-open is only for initial behavior, that is, if it is evaulating to true , then popover opens instantly even without a click. If you change the value of isOpen to true in your plunkr, you will see that ( my plunkr example ).

What you need is the popover-enable attribute:

 <button class="fa fa-link add-link" uib-popover="popover" popover-enable="isOpen">Show popover</button> 

Update to update the question:

You can evaluate any boolean expression in the popover-enable attribute instead of the static isOpen , which always wakes up to false in your example.

I created advanced plunkr to show that:

 <input type="text" ng-model="downloadSize"> <button class="fa fa-link add-link" uib-popover="popover" popover-enable="isOpen()">Show popover</button> 

with controller code

 $scope.isOpen = function() { return $scope.downloadSize > 100; } 

You have a new text box where you can enter a number to simulate the load size. When it gets > 100 , a popup will be turned on.

Answer 2

To handle the open state with the popover-is-open parameter, you must set popover-trigger="none" or possibly popover-trigger="'none'" . As the docs say

Using the "none" trigger will disable the internal trigger (s), you can then use the popover-is-open attribute only to show and hide the popover.

Answer 3

Use

  $scope.$apply(function () { $scope.isOpen = false; }); 

method for applying this property