我不想使用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:实际上,我不希望仅在某些情况下显示弹出窗口,在其他情况下应该显示。例如,我有下载对话框弹出窗口,我只想在文件大小超过某个限制时显示它。
答案 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;
});
应用此属性的方法