2015-10-14 6 views
5

popover-is-open指示文を使用してui.bootstrap popoverを表示しないようにします。たとえば、テンプレートで:ui.bootstrap popover-is-openが正しく動作しない

<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-is-openは、最初の角度コンパイルにのみ影響します。何か案は?

upd:実際には、場合によってはポップオーバーを表示したくない場合もあれば、それ以外の場合には表示する必要があります。例えば、私はダウンロードダイアログポップオーバーを持っています、そして、私はそれがファイルのサイズがいくつかの限界より大きい場合にそれを表示したいと思います。

答えて

5

popover-is-openは、最初の動作のみです。つまり、trueに達した場合、クリックせずにすぐにポップオーバーが開きます。 plunkrのisOpenの値をtrueに変更すると、(my example plunkr)が表示されます。質問更新の

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

更新:何をしたい

popover-enable属性です

あなたが代わりに静的isOpenpopover-enable属性のいずれかのブール式を評価するのは自由です常にいますあなたの例ではfalseになります。

私はそれを表示するためにadvanced plunkrを作成しました:コントローラーコード

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

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

あなたはダウンロードサイズをシミュレートするために、番号を入力することができ、新しいテキストボックスを持っています。 > 100を取得すると、ポップアップが有効になります。

+0

あなたは正しいですが、場合によってはポップオーバーを開かない場合はどうすればよいですか?たとえば、ダウンロードダイアログが表示され、ファイルのサイズが100Mbより大きい場合にのみ表示したいのですか? –

+0

'popover-enable'属性のブール条件を自由に評価することができます。私は答えを例で更新します。 – Desty

1

使用

$scope.$apply(function() { 

$scope.isOpen = false;  

}); 

はオープ​​ン状態を処理するために、このプロパティ

2

を適用するための方法は、あなたがpopover-trigger="none"または多分popover-trigger="'none'"を設定する必要がありますpopover-is-open値を聖霊降臨祭。それはどれも「トリガーを使用すると、内部トリガ(複数可)を無効にしますdocs

で言うように、一つは その後、 ポップオーバーを表示および非表示にするには専用のポップオーバーは、あるオープン属性を使用することができます。

関連する問題