ui.bootstrap popover-is-open无法正常工作

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

我不希望使用popover-is-open指令显示ui.bootstrap popover。例如,在模板中:

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

And in controller:

在控制器中:

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

See plunkr

I am expecting that popover should never be opened, but it opens on click on it. It seems that popover-is-open affects only first angular compiling. Any ideas?

我期待永远不要打开popover,但是点击它就会打开它。似乎popover-is-open仅影响第一次角度编译。有任何想法吗?

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

upd:实际上,我想在某些情况下不显示popover,在其他情况下应该显示。例如,我有下载对话框弹出窗口,我只想在文件大小超过某个限制时显示它。

3 个解决方案

#1

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

popover-is-open仅用于初始行为,即如果它被宣告为true,则即使没有点击,弹出也会立即打开。如果你在plunkr中将isOpen的值更改为true,你会看到(我的例子是plunkr)。

What you want is the popover-enable attribute:

你想要的是popover-enable属性:

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

Update for the question update:

更新问题更新:

You are free to evaluate any boolean expression in the popover-enable attribute instead of the static isOpen which always evaulates to false in your example.

您可以*地评估popover-enable属性中的任何布尔表达式,而不是静态isOpen,它在您的示例中始终会被视为false。

I have created an advanced plunkr to show that:

我创建了一个先进的plunkr来表明:

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

with the controller code

使用控制器代码

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

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

您有一个新文本框,您可以在其中输入一个数字来模拟下载大小。当它超过100时,将启用弹出窗口。

#2

In order to handle the open state whit the popover-is-open value you must set popover-trigger="none" or maybe popover-trigger="'none'". As it says in the docs

为了处理popover-is-open值的打开状态,你必须设置popover-trigger =“none”或者popover-trigger =“'none'”。正如它在文档中所说的那样

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

使用'none'触发器将禁用内部触发器,然后可以专门使用popover-is-open属性来显示和隐藏弹出窗口。

#3

Use

 $scope.$apply(function () {

$scope.isOpen = false;     

});

method for applying this property

应用此属性的方法

#1