ui.bootstrap popover-is-open不能正常工作

时间:2015-10-14 10:41:29

标签: angularjs angular-ui-bootstrap

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

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

在控制器中:

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

请参阅plunkr

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

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

3 个答案:

答案 0 :(得分:5)

popover-is-open仅用于初始行为,即如果它被评估为true,则即使没有点击,弹出窗口也会立即打开。如果您将plunkr中isOpen的值更改为true,则会看到(my example plunkr)。

你想要的是popover-enable属性:

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

更新问题更新:

您可以自由地评估popover-enable属性中的任何布尔表达式,而不是静态isOpen,它总是在您的示例中评估为false

我创建了一个advanced plunkr来显示:

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

使用控制器代码

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

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

答案 1 :(得分:2)

为了处理popover-is-open值的开放状态,您必须设置popover-trigger="none"popover-trigger="'none'"。正如它在docs

中所说的那样
  

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

答案 2 :(得分:1)

使用

 $scope.$apply(function () {

$scope.isOpen = false;     

});

应用此属性的方法